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.
