WDS84 - Animate the CSS(Part2 )

In the last article, we learned about animations in CSS. We learned about the important @keyframes rule and also seen one example to use it in which we changed the background-color property of div using rules defined in keyframes. Now let's dive deep to learn more about it.

Changing Two Properties Simultaneously

In the example of the previous article, we just changed background-color using keyframes rule. Let's see the example in which we are changing background-color as well as the position of the div element. To work this properly we are going to position property of div value relative so that we can change it using keyframes.

@keyframes myAnimation {
    0%   {background-color:blue; left:0px; top:0px;}
    25%  {background-color:red; left:200px; top:0px;}
    50%  {background-color:yellow; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:blue; left:0px; top:0px;}
}

div {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: blue;
    animation-name: myAnimation;
    animation-duration: 5s;
}

Animation Delay

The animation-delay property specifies the delay for the animation to start. The following line will delay the start of the animation by 4 seconds:

animation-delay: 4s;

The interesting thing is that we can also set negative values for this animation-delay property(🤔). If you use negative values, the animation will start as if it had been playing for t seconds.

animation-delay: -4s;

My Animation Runs only One Time

Yes, till now all of our animations run only one time. It will be good if they run for as many times as we want. The animation-iteration-count property specifies the number of times an animation should run.

Let's create one example using all these things...

That's all for today. In the next article, we will see few more things about customizing our animations like reversing and changing the speed of animations.

Till then #keepCoding.