Animation, whenever we hear this word the very first thing that comes in our mind is creativity and that’s true also. An animation not only makes things creative but it can also grab users’ attention, help us understand complicated things easily and quickly, and a lot more.
Because of all these advantages, in the past few years, there has been a rise in the use of animations on websites and web applications.
With CSS we can very easily create stunning animations without any external use of JavaScript or jQuery.
In this CSS animations tutorial, We will discuss the concepts of CSS animations from basic to advanced level with the help of some real-world examples. So, let’s get started:
What are CSS Animations?
An animation in CSS is a process of gradually changing an element’s styles from one to another.
This one-line definition might be confusing for now. Let me explain it briefly.
Suppose you want to create a rotate animation. How would you do that?
The simplest approach would be to gradually transform the element from 0 degrees to 360 degrees on the X-axis. Which, with CSS we can achieve by gradually changing the style transform: rotate(0deg); to transform: rotate(360deg);
So, here we are actually changing the element’s styles from one to another in a given time span. That is exactly what I said about CSS animations.
CSS has a list of built-in properties that lets you easily control the various factors of the animation such as the animation time, animation delay, animation current state(running or paused), how many times the animation should play, etc.
Let’s next understand how to define animation in CSS.
How to create an animation in CSS?
To create an animation in CSS we can either use the animation property or its sub-properties. The animation and its sub-properties let you control various factors of animation such as animation timing, animation delay, animation state, and other important details like how the animation should grow over its one cycle.
With animation and its sub-properties, you only control various animation factors but you can’t define an actual animation.
To define the actual animation you have to use the keyframe rule. A keyframe rule specifies what the animation should do at various points during a full cycle of the animation.
So, let’s next understand the keyframes rule.
Define @keyframes Rule
A @keyframes rule lets you define CSS styles at various intermediate points during an animation sequence.
For example, an element can have its background color red at the beginning of the animation then gradually change to green when the animation reaches 50%, and then gradually change to blue when the animation ends.
This we can very easily achieve with the @keyframes rule. The @keyframes rule lets you define CSS styling as many intermediate points as you want.
Here is the syntax to define a @keyframes rule in CSS:
@keyframes animation-name{
animation-selector{
CSS styles
}
}
Here:
- animation-name is any user-defined name. You could choose any name you want.
- animation-selector is the point where you want to apply styles on the element during the animation such as 0%, 50%, 100% etc. You can put as many animation selectors as you want.
You can also use from and to keywords for 0% and 100% respectively.
Now let’s finally create a keyframe named ‘rotateElement’ which rotates the element from 0 to 360 degrees.
@keyframes rotateElement{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
Final Step to create the animation
In the last step, we created a keyframe named ‘rotateElement’ which transforms an element from 0 to 360 degrees on the X-axis.
This keyframe alone can not rotate the element. To make the rotate animation work we have to first bind it with the animation-name property.
By default, the animation duration is set to 0 seconds. This means, we have to explicitly set the duration of the animation too, otherwise, we won’t be able to see the animation running as it will happen instantly(0 seconds).
To set the animation duration we have to use the animation-duration property. This property can accept animation time in seconds(s) and milliseconds(ms) both.
Here is a working example that rotates a div element 360 degrees:
Example:
div{
animation-name: rotateElement;
animation-duration: 6s;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes rotateElement{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
With @keyframes, you can change the styling of the element at any intermediate point starting from 0% to 100%.
In the following example, we have added an extra styling that changes the background color of the rotating div to pure cyan color as soon as the animation reaches 50%.
But remember, this doesn't change the background to pure cyan color instantly at 50%. Rather, it will gradually convert into the cyan background as the animation grows and at 50% it would be pure cyan.
Example:
div{
animation-name: rotateElement;
animation-duration: 6s;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes rotateElement{
0%{
transform: rotate(0deg);
}
50%{
background: cyan;
}
100%{
transform: rotate(360deg);
}
}
Just like the transform property, you can animate other CSS properties also.
To prove that right, let's create an animation that gradually moves the element to the right. To achieve this, we will animate the left property.
Initially, i.e. at 0%, the position of the element from the left will be 0% and when the animation reaches 100%, we want to place it 70% away from the left.
Remember that left property only works with positioned elements i.e. an element having its position other than static. Therefore, in this example, we will set the element's position to relative.
Here is a working example:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
Delay the Animation
In the last few examples, we learned what all steps are necessary to create a basic animation in CSS.
But, only those steps aren't enough as sometimes you might need to add some more features to the animation such as delaying the animation before it starts.
You can delay an animation using the animation-delay property. The delay time you can specify either in seconds(s) or milliseconds(ms).
The following animation has a delay of 3 seconds before it starts:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-delay: 3s;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
The animation delay can also be negative.
When we set a negative animation delay, the animation starts as if it had already been playing for that time span.
In the following example, we have set an animation delay of -2 seconds. Therefore, the animation will start as if it had already been playing for 2 seconds, or in other words, the animation will skip its first 2 seconds.
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-delay: -2s;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
Repeat the Animation
All the animations that we were working with so far ran only once. But this is not always the case. You sometimes need to run the animation more than once.
With the animation-iteration-count property, you can easily control how many times should an animation run. By default, the animation runs only once.
The following example will run the animation 2 times before it stops:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-iteration-count: 2;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
In most of the cases, we want the animation to run infinitely without stopping it even a single time.
To run an animation infinitely, we have to set its animation-iteration-count to infinite. This will let the animation run continuously without stopping.
Here is the animation that will run infinitely:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-iteration-count: infinite;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
Run animation in backward, forward and alternate directions
If you have noticed, all the animations that we have created so far run only in the forward direction.
Here, when I am saying forward direction, I don't mean that the element should move from left to right. Rather, I am saying that the styles that are applied on 0% should be executed first and those which are applied on 100% should be executed at last.
Similarly, when I am saying backward, I simply mean that the styles which are applied at 100% should be executed first and the styles applied at 0% should be executed at last.
To control the animation direction, we use the animation-direction property. This property can help us run the animation in the forward, backward, or both directions.
Here are the four values that the animation-direction property accepts:
normal- The animation runs in forward direction. This is the default value.reverse- The animation runs in backward direction.alternate- The animation runs in forward direction first and then in backward.alternate-reverse- The animation runs in backward direction first and then in forward.
The animation in the following example plays in the forward direction. This is the example that we are working with so far. But here, instead of using the animation-direction's by default, we are setting it explicitly to normal. Which will play it in the forward direction.
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-direction: normal;
animation-iteration-count: infinite;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
Similarly, if you want to run the animation in the backward direction, you can set the animation-direction property to reverse. Doing this will play the animation in the reverse direction. That is, styles defined at 100% will be applied at the starting of the animation and those defined at 0% will be applied once the animation ends.
Here is an example that plays the animation in the reverse direction:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-direction: reverse;
animation-iteration-count: infinite;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
If you want to play the animation first in the forward direction and then in the backward direction, you can do this by setting the animation-direction to alternate.
The following example plays the animation in both directions :
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-direction: alternate;
animation-iteration-count: infinite;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
You can also play the animation in the backward direction first and then in the forward direction by setting the animation-direction to alternate-reverse.
The following example plays the animation in the backward direction first and then in the forward direction:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
Set the speed curve of the Animation
If you have noticed, all the animations that we were working with so far aren't running at a constant speed. Instead, they start slow, then run fast, and then end slowly.
This is exactly what a speed curve does. The speed curve lets you specify how the speed of the animation should grow over its one cycle.
In CSS, we define the speed curve of the animation using the animation-timing-function property. CSS has already defined various such functions which you can directly use with the animation-timing-function property.
These function names are as follows:
ease- Specifies a slow start of the animation, then fast, and then slow again at the end. This is the default.ease-in- Specifies the animation with a slow startease-out- Specifies the animation with a slow endease-in-out- Specifies the animation with a slow start and endlinear- Specifies the animation with a constant speed from start to endsteps(n, start|end)- Specifies that the animation will grow in steps, just like a clock.step-start- Same as steps(1, start)step-end- Same as steps(1, end)cubic-bazier(p1, p2, p3, p4)- It lets you define your own custom speed curve.
The default value for the animation-timing-function property is ease, which specifies a slow start, then fast, and then slow again at the end. This is what we were dealing with so far.
All the ease functions either have a slow start or slow end or both. The following example shows a clear difference among all the four ease category speed curves:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-iteration-count: infinite;
position: relative;
width: 100px;
height: 20px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
#div1{
animation-timing-function: ease;
}
#div2{
animation-timing-function: ease-in;
}
#div3{
animation-timing-function: ease-out;
}
#div4{
animation-timing-function: ease-in-out;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
Another interesting timing function is linear which we use most of the time. The linear timing function plays the animation at a constant speed from starting to the end.
Here is an animation with a working example:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
position: relative;
width: 100px;
height: 20px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
There is one more interesting timing function steps(n, start|end) that lets you run the animation in steps, just like a clock.
The first parameter of this function is the total number of steps in one cycle of the animation. It must be a positive integer. The second parameter is optional which accepts two values start and end. These two values specify the jump term.
If the jump term is set to start, it means the first jump will happen when the animation begins. Otherwise, if you set the jump term to end(this is the default), it means the last jump will happen when the animation ends.
The following example shows a clear difference between jump start and jump end:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-iteration-count: infinite;
position: relative;
width: 100px;
height: 20px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
#div1{
animation-timing-function: steps(5, start);
}
#div2{
animation-timing-function: steps(5, end);
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
Set the fill-mode of the Animation
When you are working with animations in CSS, you might sometimes need to apply some special styling to the animating element when the animation is not running i.e. either it is about to start or has just finished.
To apply such styling, CSS has provided us with the animation-fill-mode property. The animation-fill-mode property specifies CSS styles for the animating element when the animation is not running(before it starts, ends, or both).
The animation-fill-mode property accepts the following values:
none- No external styles will be applied to the element before or after the animation. This is the default.forwards- The animating element will retain the styles specified by the last keyframe when the animation finishes.backwards- The animating element will retain the styles specified by the first keyframe before the animation starts i.e. during the animation delay period.both- This is a combination of forwards and backwards both.
The default value for the animation-fill-mode is none. This is what we were using so far. It doesn't let you specify any specific class when the animation is not running.
When we set animation-fill-mode: forwards;, the animating element retains the styles specified by the last keyframe when the animation ends.
This means, if we apply the same 'moveRight' animation on an element that we were working with, the element will not jump back to its initial state after finishing the animation.
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
position: relative;
width: 100px;
height: 20px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
#div1{
animation-fill-mode: none;
}
#div2{
animation-fill-mode: forwards;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
The animation-fill-mode: backwards; is just the opposite of the animation-fill-mode: forwards;.
When you set the animation-fill-mode to backwards, the animating element retains the styles specified by the very first keyframe before the animation starts i.e. during the animation delay period.
Because of animation-fill-mode: backwards;, the second animating element in the following example retains a light green background color during the animation delay period(3s):
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
position: relative;
width: 100px;
height: 20px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
#div1{
animation-fill-mode: none;
animation-delay: 3s;
}
#div2{
animation-fill-mode: backwards;
animation-delay: 3s;
}
@keyframes moveRight{
from{
left: 0%;
background-color: lightgreen;
}
to{
left: 70%;
}
}
The animation-fill-mode: both; is a combination of animation-fill-mode: forwards; and animation-fill-mode: backwards;.
When you set the animation-fill-mode to both, the animating element retains the styles specified by the last keyframe when the animation ends and also retains the styles specified by the first keyframe before the animation starts i.e. during the animation delay period.
This means the following example will have a light green background before the animation starts and also will not jump back to its initial position when the animation ends.
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
position: relative;
width: 100px;
height: 20px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
#div1{
animation-fill-mode: none;
animation-delay: 3s;
}
#div2{
animation-fill-mode: both;
animation-delay: 3s;
}
@keyframes moveRight{
from{
left: 0%;
background-color: lightgreen;
}
to{
left: 70%;
}
}
Play or Pause an Animation
In all the animation examples that you have seen so far, We have provided you with a play/pause button that can play or pause the animation in the middle of the cycle.
But how are we doing that?
Well, to play or pause an animation, CSS has provided us with the animation-play-state property.
The animation-play-state property accepts two values to play or pause an animation:
running- Specifies that the animation is running. This is the default.paused- Specifies that the animation is paused.
The following example shows the animation in both play and paused mode:
Example:
div{
animation-name: moveRight;
animation-duration: 6s;
animation-iteration-count: infinite;
position: relative;
width: 100px;
height: 20px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
#div1{
animation-play-state: running;
}
#div2{
animation-play-state: paused;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
Play or Pause an animation with JavaScript
In the previous example, we learned how we can play or pause an animation with the animation-play-state property. But, with only CSS, you can't play or pause an animation in the middle of the animation cycle.
If you want to pause or play the animation anywhere during the animation cycle, you have to use a little bit of JavaScript with CSS.
Here is the JavaScript code with a working example:
Example:
var movingDiv = document.getElementById('movingDiv');
var isRunning = true;
function playPause(){
if(isRunning){
movingDiv.style.animationPlayState = 'paused';
}else{
movingDiv.style.animationPlayState = 'running';
}
isRunning = !isRunning;
}
Animation Shorthand Property
In all the previous examples, we have specified each animation property individually. But, specifying each property's value individually takes more time to define the animation which also results in a longer code file.
To save your time and efforts, CSS has provided a shorthand property named animation which lets you specify all the animation properties in one shot.
The animation property is a shorthand of the following properties:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state
To understand the animation property clearly, let's first create an animation where we will specify each property's value individually.
Here is the animation with an example:
Example:
div{
animation-name: moveRight;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
In the above example, we have specified each property's value individually. But with the animation shorthand property, we can specify all these values in a single statement. This will save a lot of time and effort.
Here is the modified example with the animation:
Example:
div{
animation: moveRight 3s linear 2s infinite alternate forwards running;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
Most of the time we don't want to specify each individual property's value. Instead, we want to use their default values. As in the above example, we have two defaults values forwards and running.
As forwards and running are default values for the animation-fill-mode and animation-play-state properties respectively. Therefore, we do not need to explicitly specify them with the animation property.
You can also avoid specifying other property's respective values. In that case, CSS will use their default values.
Here is the same animation example but with an efficient code:
Example:
div{
animation: moveRight 3s linear 2s infinite alternate;
position: relative;
width: 100px;
height: 100px;
padding: 10px;
text-align: center;
background: yellow;
border: 3px dashed blue;
}
@keyframes moveRight{
from{
left: 0%;
}
to{
left: 70%;
}
}
CSS Animation Examples
In all the above examples, we were learning the basic concepts of creating an animation in CSS. We have now covered everything that you need to create an animation from a basic to an advanced level.
But in programming, learning only the concepts is not enough. You have to practice a lot to get a better understanding of the topic.
Keeping this thing in mind, let's get ready to create some real-world animation examples that will not only help you better understand CSS animations but also you will be able to easily create any animation that you want.
So, let's get started.
CSS Zoom In Animation
To create a zoom-in animation in CSS, we have to animate the transform property in combination with the opacity property.
The basic idea is, when the animation starts, keep the size of the element as 0 and let it slowly grow as the animation grows.
Here is a working example:
Example:
div{
animation-name: zoomIn;
animation-duration: 0.5s;
font-size: 2.5rem;
text-align: center;
}
@keyframes zoomIn{
from{
transform: scale(0);
opacity: 0;
}
to{
transform: scale(1);
opacity: 1;
}
}
CSS Zoom Out Animation
Zoom-out animation is just the reverse of the zoom-in animation. Here, at 0%, we want the full size of the text and then let it shrink to 0 as the animation grows.
Here is a live example:
Example:
div{
animation-name: zoomOut;
animation-duration: 0.5s;
font-size: 27px;
text-align: center;
}
@keyframes zoomOut{
from{
transform: scale(1);
opacity: 1;
}
to{
transform: scale(0);
opacity: 0;
}
}
CSS Fade In Animation
Fade-in and fade-out animations are the two most commonly used CSS animations. To accomplish these animations we can to animation the opacity property.
To fade in an element or text we have to gradually increase its opacity from 0 to 1. Which we can easily achieve by placing opacity: 0; at 0% and opacity: 1; at 100%.
Here is a live example:
Example:
div{
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease-out;
font-size: 2.5rem;
text-align: center;
}
@keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
CSS Fade Out Animation
Fade-out animation is just opposite of the fade-in animation. Here, we have to gradually decrease the opacity of the element(or text) from 1 to 0.
Here is a working example:
Example:
div{
animation-name: fadeOut;
animation-duration: 1s;
animation-timing-function: ease-in;
font-size: 2.5rem;
text-align: center;
}
@keyframes fadeOut{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
CSS Slide-in and Slide-out Animations
CSS slide-in and slide-out animations are also commonly used CSS animations.
In slide-in animation, an element slowly slides in from any of the top, left, right, or bottom sides to its original position. Whereas, in a slide-out animation, an element slowly slides out from its original position to any of the top, left, bottom, or right sides.
To slide an element you can either use the transform property or any of the top, left, bottom, or right properties in combination with the position property.
I would recommend you to use the transform property as the top, left, bottom, and right properties might cause unexpected results if the position of the element is not properly handled.
Example 1: Slide-in from left-
The following example slides in the animating element from the left(from -300px to 0px). To achieve this, we are using transform: translate3d(x, y, z); along with the opacity property.
Example:
div{
animation-name: slideInLeft;
animation-duration: 1s;
font-size: 2.5rem;
text-align: center;
}
@keyframes slideInLeft{
from{
transform: translate3d(-300px, 0, 0);
opacity: 0;
}
to{
transform: translate3d(0px, 0, 0);
opacity: 1;
}
}
Note: A slide-out animation is just the opposite of a slide-in animation. This means to create a Slide-out animation, you have to reverse the opacity i.e. from 1 to 0 as well as the X-coordinate i.e. x1-> 0px and x2-> -300px.
Example 2: Slide-in from right-
The following example slides in the element from the right(from 300px to 0px):
Example:
div{
animation-name: slideInRight;
animation-duration: 1s;
font-size: 2.5rem;
text-align: center;
}
@keyframes slideInRight{
from{
transform: translate3d(300px, 0, 0);
opacity: 0;
}
to{
transform: translate3d(0px, 0, 0);
opacity: 1;
}
}
Example 3: Slide-in from top-
The following example slides in the element from the top(from -300px to 0px). But, here, you have to specify the value of the Y-coordinate to slide in the element from -300px to 0px and put the other two coordinates(x & z) values to 0.
Example:
div{
animation-name: slideInTop;
animation-duration: 1s;
font-size: 2.5rem;
text-align: center;
}
@keyframes slideInTop{
from{
transform: translate3d(0, -300px, 0);
opacity: 0;
}
to{
transform: translate3d(0, 0px, 0);
opacity: 1;
}
}
Example 4: Slide-in from bottom-
The following example slides in the element from the bottom(from 300px to 0px).
Example:
div{
animation-name: slideInBottom;
animation-duration: 1s;
font-size: 2.5rem;
text-align: center;
}
@keyframes slideInBottom{
from{
transform: translate3d(0, 300px, 0);
opacity: 0;
}
to{
transform: translate3d(0, 0px, 0);
opacity: 1;
}
}
CSS Shake Animations
CSS shake animations are also commonly used CSS animations. These shake animations can be very easily created with a little code.
The shake animations are mostly of three types:
shakeX- Shakes the element/text horizontallyshakeY- Shakes the element/text verticallyheadShake- Shakes element/text horizontally just like a human head shake
These animations can easily be created with the transform property.
The following example code shakes the div element horizontally from -10px to 10px.
Example:
div{
animation-name: shakeX;
animation-duration: 1s;
font-size: 2.5rem;
text-align: center;
}
@keyframes shakeX{
from,to {
transform: translateX(0);
}
10%,30%,50%,70%,90% {
transform: translateX(-10px);
}
20%,40%,60%,80% {
transform: translateX(10px);
}
}
Just like the horizontal shake, you can also shake the element vertically. To do that you have to specify the Y coordinates value(-10px to 10px) .
Here is a working example:
Example:
div{
animation-name: shakeY;
animation-duration: 1s;
font-size: 2.5rem;
text-align: center;
}
@keyframes shakeY{
from,to {
transform: translateY(0);
}
10%,30%,50%,70%,90% {
transform: translateY(-10px);
}
20%,40%,60%,80% {
transform: translateY(10px);
}
}
The headshake animation is another form of the shakeX animation. But, it's a little bit tricky as well. Here, instead of shaking the element from -10px to 10px, we will first shake it from -6px to 5px and then -3px to 2px so that it could look more like a real headshake.
Here is a working example:
Example:
div{
animation-name: headShake;
animation-duration: 1s;
font-size: 2.5rem;
text-align: center;
}
@keyframes headShake{
0%,50% {
transform: translateX(0);
}
6.5% {
transform: translateX(-6px) ;
}
18.5% {
transform: translateX(5px) ;
}
31.5% {
transform: translateX(-3px) ;
}
43.5% {
transform: translateX(2px) ;
}
}
CSS Bounce Animation
The basic functionality of the bounce animation is almost similar to the shakeY animation. The only difference is that we have to vertically shake the element to higher values at starting and then gradually to lower values so that it could look more like a real bounce effect.
Here is the working example:
Example:
div{
animation-name: bounce;
animation-duration: 1.2s;
font-size: 2.5rem;
text-align: center;
padding-top: 150px;
}
@keyframes bounce {
0% { transform: translateY(-100%); }
5% { transform: translateY(-100%); }
15% { transform: translateY(0%); }
30% { transform: translateY(-30%); }
40% { transform: translateY(0%); }
50% { transform: translateY(-15%); }
60% { transform: translateY(0%); }
80% { transform: translateY(0%); }
100% { transform: translateY(0%); }
}
CSS Loading Animations
When a web page takes more time to load, most of the visitors generally exit the page and search for another website for the same content.
But, to avoid this problem, modern developers use fancy loading spinners which helps retain the visitors on the page while loading.
These loading spinners can be very easily created with the help of CSS animations.
To create a loading spinner, all you need to do is set a border around the element and make any of its sides transparent. Once it's done rotate this element using CSS animations. This will make a real loading spinner.
In the following example, we have designed the most basic and commonly used loading spinner with a working example:
Example:
div{
width: 60px;
height: 60px;
border: 5px solid rgba(0,0,0,0.6);
border-radius: 50%;
border-bottom: 5px solid transparent;
animation: spin 1s linear infinite;
}
@keyframes spin{
from{ transform: rotate(0deg)}
to{ transform: rotate(360deg)}
}
We can also create a variant of the above loading spinner by simply making three sides border transparent and the remaining side border as normal.
The following example shows this loading spinner with a working example:
Example:
div{
width: 60px;
height: 60px;
border: 5px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-bottom: 5px solid rgba(230,0,0,0.6);
animation: spin 1s linear infinite;
}
@keyframes spin{
from{ transform: rotate(0deg)}
to{ transform: rotate(360deg)}
}
Three dots loader are also common in use nowadays. A three dots loader can easily be created by gradually changing each dot opacity from 1 to 0 and specifying a constant animation-delay among the three.
Here is a working example:
Example:
div:nth-child(1){
animation: loading_dots 1s linear infinite alternate;
animation-delay: 0s;
}
div:nth-child(2){
animation: loading_dots 1s linear infinite alternate;
animation-delay: 0.33s;
}
div:nth-child(3){
animation: loading_dots 1s linear infinite alternate;
animation-delay: 0.66s;
}
@keyframes loading_dots{
from{ opacity: 0;transform: scale(0)}
to{ opacity: 1;transform: scale(1)}
}
You can easily create other variants of the three dots loader by just changing a little bit of CSS styling. The second three-dot loader is homework for you.
CSS Progress Bar Animation
To create the above progress bar animation we have to first set a striped background rotated at 45 degrees angle which we can easily create with the help of the linear-gradient function.
Once this background is set, we can then move it from right to left or left to right by animating the background-position property.
Here is the full code with a working example:
Example:
div.progress_bar_wrapper{
display: flex;
background-color: #e9ecef;
overflow: hidden;
border-radius: 5px;
}
div.proress_bar{
width: 80%;
height: 35px;
background-color: #007bff;
display: flex;
justify-content: center;
align-items: center;
color: white;
background-image: linear-gradient(
45deg,
rgba(255,255,255,.15) 25%,
transparent 25%,
transparent 50%,
rgba(255,255,255,.15) 50%,
rgba(255,255,255,.15) 75%,
transparent 75%,
transparent
);
background-size: 20px 20px;
animation: progress_bar 1s linear infinite;
}
@keyframes progress_bar{
from { background-position: 20px 0; }
to { background-position: 0 0; }
}
CSS Pulse Animation
The pulse animations can easily be created by gradually changing the opacity of the box-shadow of the element.
In the following example, we have animated the box-shadow property which gradually changes the opacity of the box-shadow of the element from 0.7 to 0.
To add more pulsating effect we are shrinking and expanding the element as well with the help of the transform property.
Example:
div{
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
animation: pulse 1.5s infinite linear;
}
@keyframes pulse{
from{
box-shadow: 0px 0px 0px 0px rgba(255,0,0,0.7);
transform: scale(0.95);
}
70%{
box-shadow: 0 0 0 10px rgba(255,0,0,0);
transform: scale(1);
}
to{
box-shadow: 0 0 0 10px rgba(255,0,0,0);
transform: scale(0.95);
}
}
CSS Flash Animation
When it comes to CSS animations, the opacity property plays a really important role as we have seen in the last several examples.
The flash animation is also a use case of the opacity property.
In the flash animation, we change the opacity of the element/text from 1 to 0 two times(one at 25% and the other at 75%) which makes it exactly like a real flash.
Here is the full code with a working example:
Example:
div{
font-size: 2.5rem;
animation: flash 1s;
}
@keyframes flash {
from,50%,to {
opacity: 1;
}
25%,75% {
opacity: 0;
}
}
CSS Solar System Animation
The solar system animation is a use case of the spin animation, where we rotate elements from 0 to 360 degrees on the X-axis. The only thicky part of this animation is the position property which helps us to position different planets into their orbit, the rest of the code is self-explanatory.
You can try out the below example to see the full code in the code editor:
Example:
<div class="spinner-box">
<div class="solar-system">
<div class="earth-orbit orbit">
<div class="planet earth"></div>
<div class="venus-orbit orbit">
<div class="planet venus"></div>
<div class="mercury-orbit orbit">
<div class="planet mercury"></div>
<div class="sun"></div>
</div>
</div>
</div>
</div>
</div>
Browser Support for CSS Animations
The below table shows the browser support for different browsers. The numbers in the table cells specify the first version of the browser that fully supports the corresponding property.
| Property | |||||
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
CSS Animation Properties
Here is the list of all the individual animation properties along with a short description:
| Property Name | Description |
| @keyframes | Defines the keyframe for the animation |
| animation | Shorthand property for defining the animation |
| animation-name | Specifies the name of the animation |
| animation-duration | Specifies how long the animation should take to complete its one cycle |
| animation-delay | Specifies how long the animation should wait before starting |
| animation-iteration-count | Specifies how many times should the animation repeat before it stops |
| animation-direction | Specifies the direction in which the animation should play |
| animation-fill-mode | Specifies the fill mode of the animation |
| animation-timing-function | Specifies how the animation should grow over its one cycle |
| animation-play-state | Specifies whether the animation is running or paused |
