# CSS @keyframes and animation Properties Work

**URL:** <https://forum.freecodecamp.org/t/css-keyframes-and-animation-properties-work/288156>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [June 21, 2019, 10:20pm UTC](https://forum.freecodecamp.org/t/css-keyframes-and-animation-properties-work/288156 "2019-06-21T22:20:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![BlinnPR](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/blinnpr/32/117647_2.png) [@BlinnPR](https://forum.freecodecamp.org/u/BlinnPR)\
**Post date:** [June 21, 2019, 10:20pm UTC](https://forum.freecodecamp.org/t/css-keyframes-and-animation-properties-work/288156/1 "2019-06-21T22:20:40Z")

</div>

Everything looks correct to me..what am I overlooking???

**Your code so far**

```html

<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
  }

  #rect {
  #anim {
    animation-name: rainbow;
    animation-duration: 4s;
  }
  @keyframes rainbow { 
    0% {
      background-color: blue;
    }
    50% {
      background-color: green;
    }
    100% {
      background-color: yellow;
    }
  }
  
  
  
  
</style>
<div id="rect"></div>

```

**Your browser information:**

User Agent is: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.90 Safari/537.36`.

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [June 22, 2019, 10:39am UTC](https://forum.freecodecamp.org/t/css-keyframes-and-animation-properties-work/288156/2 "2019-06-22T10:39:09Z")

</div>

Look at your selector:

```auto
#rect {
#anim {
  animation-name: rainbow;
  animation-duration: 4s;
}

```

You should only target the element with an id of `rect`. I guess you copied the example code and didn’t change it fully.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [March 9, 2021, 11:23am UTC](https://forum.freecodecamp.org/t/css-keyframes-and-animation-properties-work/288156/3 "2021-03-09T11:23:30Z")

</div>

Closed on March 9, 2021, 11:23am UTC