CSS Animations: How to?

Today I’m going to talk about CSS animations, the Holy Grail in the world of web animations that makes animating web elements much easier by eliminating the need of JavaScript, jQuery and any other complex libraries. CSS animations are super easy to work with once you get the hang of it and this is what this article is going to do - introduce you to the basics of CSS animations.

Animations through CSS are implemented using Transforms, Transitions and Keyframes. So let’s tackle them one by one.

Transforms

As the name suggests, they transform a web element by either skewing it, rotating it or by changing its size or coordinates.

For now, I’ll just introduce the syntax of how to use these transforms. They’ll become more clear when you see them in action with transitions in the codepen blocks down below. So just hang in there with me, alright?

• Scale

The following code transforms the element by scaling it down to 0.5 times its original size:

transform: scale(0.5);

This next line scales the element to 2 times its original size but only along the x-direction:

transform: scaleX(2);

Similarly you can use scaleY to scale an element along the y-direction.

• Translate

The following code translates the element by 100px towards the x-direction and by 200px towards the y-direction:

transform: translate(100px, 200px);

We can also translate an element along only one direction by using translateX or translateY and giving them only one argument instead of two.

• Rotate

You can also rotate an element along the x-axis, y-axis or z-axis by using rotateX, rotateY or rotateZ respectively.

transform: rotateZ(90deg);

As you may have very well guessed, the code written above rotates the element by 90 degrees along the z-axis (an imaginary line that is going into the plane of the page).

Transitions

Now that we’ve got transforms out of the way, let’s get our hands dirty with some actual animations using transitions.

Transitions define how an element transitions from one state to the next. The different states may be defined using pseudo-classes like :hover.

Let’s take a look at the basic syntax of transitions before looking at various codepen examples.

When the element in the following code is hovered upon, it’s background color changes from blue to red over the course of 2 seconds and it is translated along the x-direction by 50px over the course of 3 seconds:

element{
    background: blue;
    transition: background 2s, transform 3s;
}
element:hover{
    background: red;
    transform: translateX(50px);
}

And this is exactly how you apply transitions. You first specify the property that has to be changed and then you specify the amount of time that this transition should take to complete.

Take a look at this pen that brings the above code into effect:

Hover on the box to view animation.

As promised earlier, I’ll now show you pens of all the transform properties that I had mentioned above.

• Scale

Hover on the boxes.

• Rotate

Hover on the boxes.

Now that we’ve got transitions out of the way too, there’s not much left to do other than introducing the final topic of this article.

Keyframes

Keyframes are the powerhouse of CSS animations and essentially where we define our different animations.

First you need to define a keyframe using the @keyframes keyword. You then give a name to the animation and then describe the various states of animation using from{property1} to{property2} syntax or by using the 0%{property1} 30%{property2} 70%{property3} 100%{property4} syntax. Clearly, from-to syntax allows only two states, but the percentage syntax allows multiple stages. The percentages basically denote how much of the time has elapsed for example in the percentage syntax given above, say, if the animation duration is 100 seconds, then the animation starts with property1 at 0s, changes to property2 at 30s, then to property3 at 70s and finally to property4 at 100s.

Take a look at this example:

@keyframes move-around {
  0%{left:50px; top:100px}
  50%{left:150px; top:100px;}
  100%{left:150px; top:200px;}
}

Now that our keyframe has been defined, let’s see how it can be applied to some element:

element{
  animation-name: move-around;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

The names of the properties are pretty self-explanatory. Animation-name specifies the name of the animation that we have defined in the keyframe above, animation-duration specifies the amount of time it should take for the animation to complete, animation-iteration-count specifies the number of times the animation should repeat itself. It can take the keyword infinite or some integer value. Finally we have the animation-timing-function. It defines how the element moves during the animation. It can take the following values:

ease This is the default value. The element starts slow, speeds up in the middle, and then slows down again towards the end.

ease-in The element starts slow and then speeds up.

ease-out The element starts fast and then slows down towards the end.

linear The element moves with the same speed throughout the animation.

cubic-bezier This allows the user to define a custom timing function for the element. You can play around with cubic-bezier curves at cubic-bezier.com.

And now finally with all of that out of the way, here’s a pen showing the move-around keyframe that I had defined above:

Note that instead of writing so many different properties for the animation keyword, we can also write it in the form of shorthand:

animation: move-around 3s infinite linear;

You can do a lot with CSS animations. Take a look at these loaders that I created using pure CSS animations:

And that brings us to the end of this article on CSS animations. I hope this was helpful to you and you enjoyed yourself too. See you next time!