Animation adds personality and flair to interfaces, it is an effective and fun way to draw the attention of users and captivate them. The CSS animation property allows us to animate an element from one style to another style. It is flexible and dynamic.

CSS animation is made up of two parts:

• Keyframes.

• Animation properties.

Keyframes

Keyframes is used to define how an animation will work. It executes the animation in a sequential manner. Interfaces with multiple animations may have multiple keyframes.

@keyframes movingBall {
  0% { 
    left: 0px;
  } 
  25% { 
    background: orange;
    border-radius: 0;
  } 
  75% { 
    background: maroon;
  } 
  100% { 
    background: pink;
    left: 300px;
  } 
}

In the code example above, movingBall is the name of the animation. Each stage of the animation is represented as a percentage. Where 0% is the start and 100% is the final stage with intermediate stages in between. Also included are the style properties for the various stages.

Animation Properties

After defining @keyframes, the animation properties must be added in order for the animation to work. This binds movingBall to an element. The two basic properties we use are the animation-name and animation-duration properties.

The animation-name is the name of the animation created in keyframes and animation-duration specifies the duration of the animation, it is defined in seconds.

Apart from the animation-name and animation-duration properties, there are other important properties as well. They include:

animation-timing-function : This property defines the pace of the animation. The animation-timing-function property can have the following values:

• ease - The animation starts slowly, then fast, then ends slowly again. This is the default value.
• linear- The animation maintains the same speed from start to end.
• ease-in - The animation has a slow start.
• ease-out - The animation has a slow end.
• ease-in-out - The animation has a slow start and end.

animation-iteration-count : This property defines the number of times an animation should run. It takes in a number value. The default value is 1. A value of infinite repeats the animation infinitely which means the animation keeps on running forever.

animation-direction : This property defines the direction of the animation. The animation-direction property can take any one of these values:

• normal - The animation is played forward. This is the default value.
• reverse - The animation is played in the reverse direction, that is, backwards.
• alternate - The animation is first played in the forward direction and then in the backward direction.
• alternate-reverse - The animation is first played in the backward direction and then in the forward direction.

animation-delay : This property specifies the delay before starting the animation. It is defined in seconds.

animation-fill-mode : This property specifies what values are applied by the animation before and after executing. The animation-fill-mode property can have the following values:

• none - No style is applied to the animation before or after it executes. This is the default value.
• forwards - The element will retain the same animation properties of the last keyframe after the animation completes.
• backwards - The element will retain the same animation properties of the first keyframe after the animation completes.
• both - The animation will follow the rules for both forwards and backwards.

animation-play-state : This property allows you to play or pause the animation.

Animation Shorthand

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];

Wrapping Up

CSS animation can go a very long way in creating a more enjoyable experience for users, and the possibilities of animations that can be created are endless.

It is important to note that while there are a lot of animatable CSS properties, not all CSS properties can be animated as at writing this post. Here is a comprehensive list of CSS properties that can be animated.

Thank you for reading and I hope you found this post helpful. 💫