Basics of CSS Animations

I started learning CSS Animations, and in this article, I am briefly explaining 3 fundamental CSS properties that are at the core of CSS animations: transition, animation, and @keyframes.

transition

transition defines the transition between two diffrent state of an element. Here the different states could be hover / active / focus, etc. Transitions always require a trigger (change in state) to run.

In the above example, we can see that without transition, the height change snaps between two diffrent snaps. transition property provides options to make this change smooth.

Let’s break down the use of transition property in the above example:

transition is a shorthand syntax. it is made up of 4 CSS properties:

• transition-property: Defines the CSS properties to which the transition is going to apply.
  
• transition-duration: Defines the duration of the transition.
  
• transition-timing-function: Defines the behaviour and nature of the transition.
  
• transition-delay: Defines the duration to wait before starting the transition effect.
  

So in this example,

Copy 
1/* property | duration | timing-function | delay  */
2transition: height 2s ease-in 1s;

• The transition effect is applied to height property.
• The transition effect takes 2s.
• ease-in is the name of the effect.
• The transition effect starts applying after the wait of 1s.

Now, one thing to observe is that the transition is only limited to the initial and final state. It can apply the transition effect to a property that is changing its value from A to B.

What if we want to control the intermediate state? i.e. What if we wanted to define multiple states of an element for one complete animation sequence? There comes the @keyframes CSS property.

@keyframes

@keyframes enables you to define multiple states of element during the animation sequence. This gives you more control over the intermediate states of the element. The syntax of the @keyframes goes like,

Copy 
1@keyframes animation-identifier {
2  0% {
3    height: 64px;
4  }
5
6  25% {
7    height: 128px;
8  }
9
10  50% {
11    height: 96px;
12  }
13
14  75% {
15    height: 100px;
16  }
17
18  100% {
19    height: 64px;
20  }
21}

Here, we can observe that, we are able to define how the element styles should change throughout the multiple stages of the animation sequence. We will see this in action, just in a bit! Before that, I want to share one analogy that’ll help you understand this concept better.

You can think of @keyframes as a function, where animation-identifier is the name of the function and just like how we can reuse functions, we can reuse this animation and apply to any element. Now, @keyframes is analogous to defining the function, i.e. writing the logic of how the function works. But we still need to invoke the function to make it work.

How do we invoke(apply) the animation defined inside @keyframes? There comes the animation CSS property.

animation

animation allows you to apply the animation states that you have defined using @keyframes.

Note that, the animation-identifier name you have given to @keyframes is acting as a function name, and using inside `animation` property to apply the animation.

Just like transition, animation is also a shorthand for multiple CSS properties, although the list is a little bigger. So we will only cover the ones which are frequently used. You can find the full list here.

Copy 
1/* animation-name | duration | timing-function | delay */
2animation: animation-identifier 2s ease-out 1s;

• animation-name: Specifies name of the animation that you defined via @keyframes.
  
• animation-duration: Defines the duration of the animation.
  
• animation-timing-function: Defines the behaviour and nature of the animation.
  
• animation-delay: Defines the time to wait from before starting the animation.