24 Nov CSS – Animations
In CSS, we can easily perform animations on an element. Animation in this context means changing the style of an element. Remember, for Animations in CSS, we do not need Flash or JavaScript.
What is the CSS @keyframes Rule?
For animations in CSS, we use the concept of @keyframes. The @keyframes is a rule wherein you need to specify the CSS styles. Bind the animation to an element for it to work successfully.
Use the animation-name property to set the name of the @keyframes animation. The duration of the animation is set using the animation-duration property. Similarly, we have the following properties that will help you in performing the task of animations on a web page:
- animation
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
Let us now see the following animation examples:
- Change the background color
- Change the background color multiple times
- Animate and move the rectangular div
- Play animation in reverse order
CSS Animations Example – Change the background color
In this example, we will set animation. We have set the animation-duration property below to set the duration of the animation. The default is 0 seconds i.e., no animation. The from and to keywords are used in the below example to set the beginning and end.
Let us now see an example to change the background color:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background-color: blue; color: white; border: 2px solid black; animation-name: demo; animation-duration: 3s; } @keyframes demo { from {background-color: blue;} to {background-color: green;} } </style> </head> <body> <h1>CSS Animation Example</h1> <div>Box</div> </body> </html> |
Output
After 3 seconds, the above div will animate and the color will change:
Change the background color multiple times
In this example, we will change the background color of a div on a web page multiple times. The color will change and using the animation-duration property the total duration of the animation is set. Let us now see an example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background-color: yellow; color: white; border: 2px solid black; animation-name: demo; animation-duration: 10s; } @keyframes demo { 0% {background-color: yellow;} 20% {background-color: blue;} 40% {background-color: green;} 60% {background-color: orange;} 80% {background-color: navy;} 100% {background-color: cyan;} } </style> </head> <body> <h1>CSS Animation</h1> <div></div> <p>The background color of the above div will change 5 times.</p> </body> </html> |
Output
First, the color changes to blue from yellow.
Then, the color changes to green from blue.
Then, the color changes to orange from green.
Then, the color changes to navy from orange.
Then, the color changes to cyan from navy:
Animate and move the rectangular div
In this example, we will move a rectangular div:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background-color: yellow; color: white; border: 2px solid black; position: relative; animation-name: demo; animation-duration: 4s; } @keyframes demo { 0% {background-color: yellow; left:0px; top:0px;} 15% {background-color: blue; left:50px; top:0px;} 30% {background-color: green; left:120px; top:0px;} 50% {background-color: orange; left:120px; top:120px;} 75% {background-color: orange; left:0px; top:120px;} 90% {background-color: black; left:0px; top:50px;} 100% {background-color: cyan; left:0px; top:0px;} } </style> </head> <body> <h1>CSS Animation</h1> <p>Here, we are animating a rectangle:</p> <div></div> </body> </html> |
Output
After a second, the box will animate:
After a second, the box will animate again:
Play animation in reverse order
To play the animation in reverse order, we will use the animation-direction property. With this, we can play animation forwards and backward alternatively.
The following can be the values of the animation-direction property:
- normal: The animation is played forward i.e., the normal default way.
- reverse: The animation is played backward
- alternate: The animation is played forwards first, then backward
- alternate-reverse: The animation is played backward first, then forwards i.e., the reverse order.
Let us now see an example. We have used the animation property as well. This is a shorthand property for animation:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <style> div { width: 150px; height: 150px; background-color: yellow; color: white; border: 2px solid black; position: relative; animation: demo 4s 2; animation-direction: alternate; } @keyframes demo { 0% {background-color: yellow; left:0px; top:0px;} 15% {background-color: blue; left:50px; top:0px;} 30% {background-color: green; left:120px; top:0px;} 50% {background-color: orange; left:120px; top:120px;} 75% {background-color: orange; left:0px; top:120px;} 90% {background-color: black; left:0px; top:50px;} 100% {background-color: cyan; left:0px; top:0px;} } </style> </head> <body> <h1>CSS Animation</h1> <p>Here, we are animating a rectangle in forward and backward order:</p> <div></div> </body> </html> |
Output
If you liked the tutorial, spread the word and share the link and our website Studyopedia with others.
Read More:
No Comments