+ 1

The animation is running as required but the error shows shows order of the values matter.

QUESTION:* Use the animation property for the class .box to add the following effects: Use the animation with name ghumo. The duration of the animation will be 4s. The animation should happen at a linear speed. The animation should occur 2 times. By default the rotate function makes an element rotate clockwise, but we want our box to rotate anti-clockwise, so we will have to reverse the direction of the animation. And at the end of the animation, we want the box to take the background color of the last keyframe. *Code* is given below: <!DOCTYPE html> <html> <head> <title>CSS animation timing function</title> <style> .box { height: 150px; width: 150px; border-radius: 5px; margin: 100px; background-color:#4535AA; animation: ghumo 4s linear 2 reverse; } @keyframes ghumo { 0% { transform: rotate(0); background-color: #ED639E; } 100% { transform: rotate(360deg); background-color: #FFB643 } } </style> </head> <body> <div class="box"></div> </body> </html> *Error: Order of the values matter. Something seems to be missing.

css animation error

6th Aug 2022, 10:31 AM

Sai Gadge

1 Answer

+ 1

Hi Are you trying to transform background color from #ED639E to #FFB643 but getting it in reverse ? If yes Its because you set the flow of animation in reverse so that it transform from 100٪ to 0٪ If you want to transform 1) from #ED639E to #FFB643 and 2) rotate anticlockwise, Then 1) Change ' reverse ' to ' normal ' 2) change ' 360deg ' to ' -360deg ' Hope this helps..

12th Aug 2022, 9:23 AM

Sharif