All you Need to Know to Implement Animations in CSS

The Complete WebDeveloper (38 Blogs) Become a Certified Professional

CSS is one of the most powerful ways to make the webpage interactive. It transforms the look and feels of our basic HTML webpage. One of the important and exciting features that CSS offers is that it lets us perform animations. It allows us to move the elements within our page. Let’s start our Journey of Animations in CSS in the following order:

Animations in CSS
Keyframes in CSS
Animation Properties

Animations in CSS

Adding animations to our website is a great way to draw the attention of the users. It not only adds value to our page but also enriches user experience. The animation in CSS is built upon two parts. They are

Keyframes
Animation

The CSS animations are supported in all browsers. However, some older browsers such as Safari (upto Version 8.0) requires prefix (-webkit-) to interpret the animation properties. For example:

<html>
<head>
<style>
.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
-webkit-animation-name: cssanim; /* old browsers */
-webkit-animation-duration: 5s; /* old browsers */
animation-name: cssanim;
animation-duration: 5s;
}
/* old browsers */
@-webkit-keyframes cssanim {
0% {left: 0px;}
100% {left: 300px;}
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 300px;}
}
</style>
</head>
<body>
<div class="anim"></div>
</body>
</html>

We can use the sample html page from above and replace the CSS code in the style tag for trying out further examples.

Keyframes in CSS

This is the building block of animations in CSS. It used to define specific moments and styles of the animation on our webpage. In other words, when we specify the @keyframes inside our CSS, it gets the control to modify the current state to a new state or animate the objects for a certain duration. Check out this Full Stack Developer Certification Training today to learn more about CSS.

The @keyframes need to have certain properties to control the animation such as the name of the animation, stages, and properties.

Name – A name is required to be for every animation to describe its behaviors.
Stages – The stage represents the completion of an animation. It can be done denoted either with “to” and “from” keyword or as a percentage, whereas 0% represents the beginning state and 100% represents the end state of an animation. The benefit of using the percentage representation is that we can define multiple intermediate stages in between i.e. what should be the behavior of animation at 50% stage or 75% etc.
Properties – These properties give us control over the @keyframes to manipulate them during the animation.


.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 5s;
}

@keyframes cssanim {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(1);
}
}

Now since we are clear about defining keyframes. Let us explore animation properties, to describe how to animate our elements and objects. The two property i.e. inherit and initial can be used with all the animation types. These properties are generally used along with the div tag to exhibit different behaviors.

initial: Sets this property to its default value.
inherit: Inherits this property from its parent element.

Animation Properties

animation-name

It specifies the name of the animation, which is used in the @keyframes to manipulate. The possible values are:

name: This specifies the name to bind to the keyframe for animation.
none: This is the default value and can be used to override the inherited or cascading animations.

Syntax:

animation-name: name | none | initial | inherit;

.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 5s;
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 300px;}
}

animation-duration

It specifies the time it takes for an animation to complete one execution. It is defined in seconds or milliseconds (e.g., 4s or 400ms). The default value of this property is 0s, so if this property is not specified then the animation will not take place.

Syntax:

animation-duration: time;


.anim {
height: 200px;
width: 200px;
background: blue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 4s;
}

@keyframes cssanim {
0% {
transform: scale(0.4);
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 1;
}
100% {
transform: scale(1);
}
}

animation-delay

The animation-delay property allows us to specify the delay in animation. It defines when an animation sequence will start execution.

The value of this property can be declared in either seconds(s) or milliseconds(ms). It can hold both positive and negative values. A positive value indicates that the animation will start after the specified time is passed and until then it will remain unanimated. On the other hand, a negative value will immediately start the animation from the point as if it has already been executing for a specified time frame.

Syntax:

animation-delay: time;

.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 4s;
animation-delay: 4s;
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 250px;}
}

animation-iteration-count

This property indicates the number of times an animation sequence should be played. The default value of this property is 1.The possible values are:

number – denotes the number of iterations
infinite – indicates that the animation should repeat forever

Syntax:

animation-iteration-count: number | infinite;

.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 2s;
animation-iteration-count: 4;
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 100px;}
}

animation-direction

It defines the direction of the animation. The direction of the element can be set to play forwards, backward or in alternate cycles. The default value of this property is normal, and it gets resets on each cycle. The possible values are:

normal – This is the default behavior and the animation is played forward. After each cycle the animation gets to its initial state and is played forward again
reverse – The animation is played in the backward direction. After each cycle the animation gets to its end state and is played backward
alternate – The direction of the animation is reversed i.e. it plays forward first and then backwards on every cycle. Every odd cycle renders forward animation and every even cycle renders backward movement.
alternate-reverse – The direction of the animation is reversed alternately. Here the animation is played backward first and then forward on every cycle. Every odd cycle moves reverse or backward and every even cycle renders forward animation.

Syntax:

animation-direction: normal | reverse | alternate | alternate-reverse;

.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes cssanim {
0% {left: 0px;}
100% {left: 100px;}
}

animation-timing-function

This property determines the speed curve or the movement style of animation. It is assigned to make the change in the animation style smoothly from one form to another. If no value is assigned it defaults to ease. The possible values for animation-timing-function are:

ease – This is the default value of the property. Here the animation starts slow, gradually becomes fast in the middle and then again ends up slowly.
linear – The animation maintains the same speed throughout the cycle i.e from start to end.
ease-in – The animation starts slowly.
ease-out – The animation ends slowly.
ease-in-out – The animation moves slowly both during start and end.
cubic-bezier(n,n,n,n) – This advanced feature let us create a custom timing function by defining our own values. The possible value ranges from 0 to 1.

Syntax:

.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 2s;
animation-direction: reverse;
}
@keyframes cssanim {
0% {background: orange; left: 0px;}
50% {background: yellow; left: 200px; top: 200px;}
100% {background: blue; left: 100px;}
}

animation-fill-mode

This is a special property as it determines the animation style before or after the animation is played. As by default, the style of the element is not affected by the animation before the beginning or after it ends. This property is useful as it helps in overriding this default behavior of the animation. The following are possible values for animation-fill-mode property:

none – This is the default value of the property i.e. the animation styles are not applied to the element, before or after the animation.
forwards – The styles are retained by the element in the final animation sequence i.e. after the animation is finished.
backwards – The styles are retained by the element in the initial animation sequence i.e. before the animation is stared particularly during the animation delay.
both – This signifies that the animation will follow in both the direction i.e. forwards and backwards

Unleash your creativity and build stunning websites with our Website Development Course.

Syntax:

animation-fill-mode: none | forwards | backwards | both;


.anim {
width: 50px;
height: 50px;
background: lightblue;
color: white;
font-weight: bold;
position: relative;
animation-name: cssanim;
animation-duration: 5s;
animation-iteration-count: infinite;
border-radius: 100%
}

#anim1 {animation-timing-function: ease;}
#anim2 {animation-timing-function: linear;}
#anim3 {animation-timing-function: ease-in;}
#anim4 {animation-timing-function: ease-out;}
#anim5 {animation-timing-function: ease-in-out;}

@keyframes cssanim {
from {left: 0px;}
to {left: 400px;}
}

animation-play-state

This property specifies an animation to be either in playing or paused state. Also, when an animation is resumed from pause it starts from where it left. The possible values are:

playing – To render the animation in running
paused – To render the animation in pause state.

Syntax:

animation-play-state: paused | playing;


.anim {
width: 100px;
height: 100px;
background: lightblue;
position: relative;
animation-name: cssanim;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
border-radius: 100%;
}

@keyframes cssanim {
0% {top: 0px; background-color: orange;}
50% {top: 0px; background-color: green;}
100% {top: 100px;background-color: blue; }
}

animation

This is known as the animation shorthand property. It is used for cleaner code. Once we get accustomed with all the animation properties, it is advised that we use the animation shorthand for coding faster and defining all the properties in a single line.

Syntax:

All of the animation effects that we show above using different animation properties can be attained by using the shorthand animation property.

.anim {
height: 200px;
width: 200px;
background: lightblue;
position: relative;
border-radius: 100%;
animation-name: cssanim;
animation-duration: 2s;
animation-direction: normal;
animation-play-state: paused;
}
@keyframes cssanim {
0% {background: orange; top: 0px;}
50% {background: yellow; left: 200px; top: 200px;}
100% {background: blue; left: 100px;}
}

This concludes all of the animation properties that can be used in CSS. We should try different variations of these properties to get a more clear picture. When we get comfortable, the animation shorthand property can be of great help to write cleaner and faster code. This is one of the important skills to learn in CSS for web developers. Since we tend to focus more on moving objects rather than static ones, animations can help us achieve that and also develop great remarkable webpages.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the Best React JS Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.

Got a question for us? Please mention it in the comments section of “Animations in CSS” blog and we will get back to you.