How to play the animation

HTML-CSS
1

Tell us what’s happening:

I completed this task and all i got was a black rectangle, until I press enter in the code and the animation starts up and cycles through the colors specified in the code, to play again i just added another newline,

Hopefully this will help others figure out what is meant to happen with this.

Your code so far


<style>
  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>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0.

Challenge: Learn How the CSS @keyframes and animation Properties Work

Link to the challenge:

2

It runs when you press enter is because the editor on the challenges have a listener for new input, and if there is a new input, it is told to take that code and RUN it. That’s why when you press enter, the keyframes run. But eventually, the keyframes will stop, because it is not specified to repeat. It’s just specified to run for how long. If you want to see it run infinitely, just add animation-iteration-count: infinite;, then it will run infinitely.

1 Like
3

Cool thanks, have completed the whole unit now so moving on to Applied Accessibility next week. Great to get first class support from everyone, how learning should be.

1 Like