Header Ads Widget

How to animate HTML elements?

My codding spot June 26, 2021

An animation is the process of moving any drawing, image or changing it’s styles during movement. The best example of animation is cartoon characters. 

This post describes about animation in CSS, how to apply animation to HTML elements with examples.

CSS animation
CSS animation 


Let’s discuss about

What is animation in CSS? 

In CSS animation, CSS styles of an html element change from one to another. For example, changing background color of an html element, moving element one direction to another,etc... 

CSS animation includes @keyframes rules and properties of animation. 

For css animation @keyframes rules specification is must necessary. 

What is @keyframes rules in css animation? 

@keyframes rules is most important part of css animation. 

It contains animation name which you want  like to give. This animation name is also declare in element’s styles. CSS styles changes at some period of time.

 To make changes in styles “from” and “to” keywords are added before css property. 

The “from” indicates the starting phase of animation and “to” indicates the ending phase of animation. 

Let’s understand with example. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!Doctype html>
<html>
<head>
<title>Animation</title>
<style>
@keyframes sizechange{
from{font-size:26pt;}
to{font-size:36pt;}
}
p{
margin:50px;
color:blue;
font-size:26pt;
animation-name:sizechange;
animation-duration:4s;}
</style>
</head>
<body>
<p>This is animation example.</p>
</body>
</html>

In example animation given to “<p>” element's  font-size property. Initial font-size is “26pt” that changes to “36pt” in duration of 4 second. 

Here is the output in which font-size is "26pt" which changes to "36pt".




You can also use percentage for more phases in animation. 
0% indicates the starting phase of animation and 100% indicates the ending phase of animation. 

In between these two phases multiple phases can be added. 

Following example describes animation using percentage. 

  

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!Doctype html>
<html>
<head>
<title>Animation</title>
<style>
@keyframes shapechange{
0%{border-radius:10px;}
30%{border-radius:50px;}
60%{border-radius:100px;}
100%{border-radius:150px;}}
div{
height:300px;
width:300px;
margin:50px;
background-color:magenta;
border-radius:10px;
animation-name:shapechange;
animation-duration:5s;}
</style>
</head>
<body>
<div></div>
</body>
</html>


This example changes the shape of a “div” element from square to round shape. 

At 0% corner of “div” element is 10 pixel round. 
At 30% corner of “div” element is 50 pixel round. 
At 60% corner of “div” element is 100 pixel round and square shape convert to little round shape. 
At 100% “div” element shape converts to fully round shape. 

Output:-



✒ You can also apply animation to multiple css properties of single element. 

In example “color” , “margin-left”, and “margin-top” properties are used to create animation of “<h1>” element. 

Margin properties are used change the position of an element. At the same time the color is also changing. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!Doctype html>
<html>
<head>
<title>Animation</title>
<style>
@keyframes textanimate{
0%{color:blue;margin-left:20px;margin-top:0px;}
40%{color:red;margin-left:50px;margin-top:30px;}
70%{color:yellow;margin-left:100px;margin-top:0px;}
100%{color:green;margin-left:150px;margin-top:100px;}}
h1{
color:blue;
animation-name:textanimate;
animation-duration:5s;
}
</style>
</head>
<body>
<h1>Animation</h1>
</body>
</html>

In output color and margin of text changing. 




Now we discuss about animation-properties.

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

(1) animation-name

This property includes name of animation. An animation name is define at @keyframes and declare in element’s css styles. 
In previous example name of animation is “textanimate”.

(2) animation-duration

The animation-duration property specifies the time taken by animation to complete. 

Note:-
You must have to specify this property, if you not specify animation-duration the animation will not start and it’s by default value is consider as 0. Animation duration generally specify in seconds. 

(3) animation-delay 

animation-delay property specify that in how much time the animation take to starts. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!Doctype html>
<html>
<head>
<title>Animation</title>
<style>
@keyframes widthadd{
from{width:300px;}
to{width:700px;}}
.demo{
height:400px;
width:300px;
background:linear-gradient(to right,blue,red);
animation-name:widthadd;
animation-duration:5s;
animation-delay:2s;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>
In above example animation starts with 2 second delay. 

Output:-


You can also specify negative value to animation-delay property. 

With negative value the animation starts after specified time completion in animation. 
Understand with example. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!Doctype html>
<html>
<head>
<title>Animation</title>
<style>
@keyframes widthadd{
from{width:300px;}
to{width:700px;}}
.demo{
height:400px;
width:300px;
background:linear-gradient(to right,blue,red);
animation-name:widthadd;
animation-duration:5s;
animation-delay:-2s;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>

Here duration of animation is 5 seconds, but animation starts after completion of 2 seconds in animation. (In animation 2 seconds already completed) 

Output:-

 


(4) animation-iteration-count

The animation-iteration-count specifies how many times the animation will repeat . 
By default animation repeats only once. 
This property have following values. 

• Numeric : you can specify numbers as a value. 
• Infinite : repetition of animation never ends. 
• Initial : set the default value. 
• Inherit : value inherited from it’s parent. 

              In example the animation play 5 times. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!Doctype html>
<html>
<head>
<title>Animation</title>
<style>
@keyframes widthadd{
from{width:300px;}
to{width:700px;}}
.demo{
height:400px;
width:300px;
background-color:blue;
animation-name:widthadd;
animation-duration:5s;
animation-iteration-count:5;
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>

Output:-


(5) animation-direction

animation-direction property specify direction for animation. 

This property have four possible values. 

• normal :- animation plays normally (in forward direction).
 This direction is default. 
• reverse :- animation plays backwards, in reverse direction. 
• alternate :- animation first plays in forward direction then plays in backward direction. 
• alternate-reverse :- This animation is opposite from alternate direction, means it first plays in backward direction after then in forwards. 

Below example shows the animation in reverse direction.


..... 
..... 

@keyframes demo{
0%{background-color:slateblue;}
30%{background-color:tomato}
60%{background-color:lime;}
100%{background-color:purple;}}
div{
width:200px;
height:200px;
background-color:slateblue;
animation-name:demo;
animation-duration:5s;
animation-direction:reverse;
}
... 
... 
... 

<div></div>
.... 
....

Output:-



You can change the value to see difference in output. 

(6) animation-timing-function 

This property specifies the speed curve of an animation. 

You can use following values for animation-timing-function.

• linear : The animation runs in same speed from start to end. 
• ease-in : animation starting in slow speed. 
• ease-out : animation ends slowly. 
• ease-in-out : animation starts slowly and also ending with slow speed. 
• ease : animation starts slowly, then runs fast and  ends with slowly. 

In example speed curve of animation is linear. 

..... 
..... 

@keyframes speed{
0%{top:10px;left:10px;}
50%{top:10px;left:200px;}
100%{top:100px;left:100px;}}
.timing{
position:absolute;
height:200px;
width:200px;
background-color:green;
animation-name:speed;
animation-duration:5s;
animation-timing-function:linear;
... 
... 
... 

<div class="timing"></div>
.... 
....

Output:-




• cubic-bezier(n, n, n, n) : Using cubic-bezier () function you can specify your own values. 
In brackets four n represents x1, y1, x2, y2 coordinator respectively. (x1, y1) defines starting points and (x2, y2) defines ending points. 

Below example show cubic-bezier  curve. 

..... 
..... 

@keyframes speed{
0%{top:10px;left:10px;}
50%{top:10px;left:200px;}
100%{top:100px;left:100px;}}
.timing{
position:absolute;
height:200px;
width:200px;
background-color:green;
animation-name:speed;
animation-duration:5s;
animation-timing-function:cubic-bezier(0.3,0.5,0.7,0.3);
... 
... 
... 

<div class="timing"></div>
.... 
....

Output:-


(7) animation-fill-mode

Effect of css styles specified in @keyframes are not affect element before and after the animation run. 
With animation-fill-mode property allow you to keep last css styles after completion of an animation. 

You can specify following values to animation-fill-mode.

• forwards :- The element keeps last css styles of keyframes. 
• backwards :- The element keeps first css styles define in keyframes. 
• both :- Before an animation starts, element have first css styles of keyframes. After animation ends, the element keeps last css styles specified in keyframes. 
•       none :- No css styles will apply to element  before and after an animation play. 
In example element keep purple color, which is last define in keyframes. 


..... 
..... 
@keyframes demo{
0%{background-color:slateblue;}
30%{background-color:tomato;}
60%{background-color:lime;}
100%{background-color:purple;}}
div{
width:400px;
height:400px;
background-color:slateblue;
animation-name:demo;
animation-duration:5s;
animation-fill-mode:forwards;
}

... 
... 
... 

<div class="demo"></div>
.... 
....


Output:-


(8) animation-play-state 

An animation-play-state property sets the state of animation like playing mode or paused. 
Possible values are:
• running :- Animation is running. It is default value. 
• paused :- Animation is paused. 
• Inherit :- Inherit property from parent element. 
• Initial :- set the default value to property. 

              In example the animation is paused. 


..... 
..... 

@keyframes speed{
0%{top:0px;left:400px;}
50%{top:200px;left:400px;}
100%{top:200px;left:0px;}}
.timing{
position:absolute;
height:400px;
width:400px;
background-color:green;
animation-name:speed;
animation-duration:5s;
animation-timing-function:linear;
animation-play-state:paused;
... 
... 
... 

<div class="timing"></div>
.... 
....

So, these are the animation properties. You can also define all these properties values together using shorthand property. 
Specify values in following order with space. 

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Conclusion

Animation is  a way to change element’s css styles from one to another. @keyframes rules and animation property, these two combination is necessary for animation. 

Note:- To run any animation, compulsory specify animation-name and animation-duration properties, because without these two properties animation will not start. 

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments