Almost every modern web pages uses some animation to attract user’s attention. The animation property of CSS is used to create animation. It basically changes one property to another in the specified duration.

To apply animation on any element, we need to provide the following properties in that element.

• animation-name – Any name of the animation
• animation-duration – The total duration that the animation will run
• animation-timing-function – The speed curve of transition effect. This can have following values:
  • linear – Effect runs at same speed from start to end.
  • ease – Effect starts slowly then fast, then end slowly.
  • ease-in – Effect starts slowly.
  • ease-out – Effect ends slowly.
  • ease-in-out – Effect starts slowly and ends slowly.
  • cubic-bezier(n,n,n,n) – we can define our own values.
• animation-delay – Time delay before starting the animation
• animation-iteration-count – The number of times the animation will run
• animation-direction – The direction of animation. It can have following values.
  • normal – This is default value
  • reverse – The animation plays in reverse direction
  • alternate – The animation plays in first forward then backward direction.
  • alternate-reverse – The animation plays in first backward then forward direction
• animation-fill-mode – This property specifies what style will be applied to the element when animation is finished or before it starts. It can have the following values:
  • none – No style from animation will apply to element(default value)
  • forwards – The last keyframe style value will apply to the element.
  • backwards – The first keyframe style value will apply to the element.
  • both – Both forwards and backwards rules will apply to element.

 animation: a1 6s ease-out 1s 2 normal none;

@keyframes

The animation rules are specified in @keyframes. We can divide the entire animation duration in percentages and can write styles for individual percentage fraction. We need to specify the animation-name with @keyframes.

@keyframes a1 {
    0% { width: 50px; height: 50px; }
    50% { width: 100px; height: 100px; }
    100% { width: 200px; height: 200px; }
}

The styles will change from one to other as specified in @keyframes in the total duration.

We can also use from and to value to specify styles in @keyframes.

@keyframes a1 {
    from { width: 50px }
    to{ width: 100px }
}

Example:

.box {
    width: 200px;
    height: 200px;
    animation: a1 6s ease-out 1s 2 normal none ;
}

@keyframes a1 {
    0% { width: 0; height: 0; }
    50% { width: 50px; height: 50px; }
    80% { width: 100px; height: 100px; }
    100% { width: 150px; height: 150px; }
}

We can set all the animation properties individually.

.box {
    width: 200px;
    height: 200px;
    animation-name: a1;
    animation-duration: 6s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
}

@keyframes a1 {
    from { width: 0; height: 0;}
    to { width: 150px; height: 150px;}
}

Hope you have got a clear idea about animation and how it works.

Amitav Mishra

Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next |  Angular | Vue | HTML | CSS