Applied Visual Design: Learn How the CSS @keyframes and animation Properties Work

HTML-CSS
1

When I put this code in, it passes, but the graphic is just a black rectangle. No animation, just a black rectangle.

Your code so far

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


  #rect {
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>
</style>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image

2

You linked a wrong exercise. Also you deleted the beginning of <style> tag.

Good luck :slight_smile:

3

Sorry.

https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work

When I put this code in, it passes, but the graphic is just a black rectangle. No animation, just a black rectangle.

div { height: 40px; width: 70%; background: black; margin: 50px auto; border-radius: 5px; } #rect { animation-name: rainbow; animation-duration: 4s; } @keyframes colorful { 0%{ background-color: blue; } 50%{ background-color: green; } 100%{ background-color: yellow; } }
4

Figured it out: was missing style and div id “rect” tags at end.

Thank you.