CSS Animation Basics

CSS Animations enable the front-end developer to animate HTML elements which in turn give your website a fun and cool look. In this post, we will take a deep dive into how to use animations in CSS. When you are done, you should have a good understanding of the topic. Try typing the code into your code editor and see how it works. This will help the concepts sink in deeper. Now let us take a look at this example.

To use animations we have to use @keyframes. Keyframes are what CSS use to make animations.

@keyframes variable_name
{
    0% {
	  opacity: 0;
    }
    50% {
      	 opacity: 0.5;
    }
   100% {
	 opacity: 1;
   }
}
.class_name
{
	animation-name: variable_name
	animation-duration: 3s;
	animation-delay: 3s;
	animation-iteration-count: 3;
	animation-timing-function: ease-in / ease-out / ease-in-out / linear /                                                         cubic-bezier(0, 0, 1, 1);
	animation-play-state: paused / running;
	animation-direction: normal / reverse / alternate / alternate-reverse
	animation-fill-mode: none / forwards / backwards;
}

To make the @keyframes usable, you can declare it inside a class using the animation_name property name. This invokes the @keyframes that you have just created.

These two CSS properties are the only ones that are required to fully use @keyframes.

animation-duration : This is the time that is required for the animation to work.
animation-delay : This property waits for the specified amount of time before the animation starts taking effect.

The animation-iteration-count specifies the number of times the @keyframes will happen.

The animation-timing-function describes how fast or how slow the parameters specified in the @keyframes will happen over time. Its sub-properties are:

ease-in : The animation will start at a normal pace and then accelerate over time.
ease-out : The animation will at the normal pace and then decelerate over time.
ease-in-out : The animation starts slower, then speeds up in the middle and then slows down at the end.
linear : This will give the animation a constant speed, hence there will be no acceleration or deceleration.
cubic-bezier : This value allows us to create our custom animation-timing-function. It contains four values. The first value is the starting point of the x-axis, the second value is the starting point of the y-axis, the third value is the endpoint of the x-axis and the fourth value is the endpoint of the y-axis.

The animation-play-state has the option of the paused and running
value. The running value makes the animation proceed as normal. The
paused value makes the animation pause and when the value is set back to running it continues from where it was left off.

The animation-direction determines whether an animation should play forwards, backwards or alternating back and forth.

normal : This moves the class forwards to the end of the defined x-axis and when done it resets the position. This is the default value.
reverse : This moves the class backwards from the end of the defined x-axis to its original position.
alternate : This moves the class forwards to the end of the defined x-axis then backwards to the original position.
alternate-reverse : This moves the class backwards from the end of the defined x-axis to the original position.

Then animation-fill-mode displays the animation styles before and after the animation plays. Its values are:

none : The animation will not apply any styles to the class or target.
forwards : The animation will set the value to the last keyframe. In our case,
it will be the 100% value in the @keyframes.
backwards : The animation will set the value to the first keyframe. In our case, it will be the 0% value in the @keyframes variable_name.
both : It applies the forwards and the backwards fill-mode.

There is a shortcut to declare animation property values. This is the
preferred arrangement of values when using the shortcut.

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state.

So we have taken a good look at animations. You have learned how to use
@keyframes and the different sub-properties of animation. It isn’t
difficult. Keep using them and they will seem easier with time.