Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create CSS3 Keyframe Animations?
To create keyframe animations in CSS3, define individual keyframe. Keyframes will control the intermediate animation steps in CSS3. Keyframes are the rules for animation on a web page. The animation properties are used with keyframes to control the animation. Let us see the syntax −
Syntax
@keyframes animationname {selector {styles;}}
Above,
animationname− The name of the animation.
selector− This is the keyframe selector i.e. the animation duration %.
styles− These are the CSS style properties
Animate a rectangle to a circle
Create a rectangle and animate it to a circle. The animation duration is set to 5 seconds. The from and to suggests that the animation change from the current style to a new style. The following is an example of creating keyframe animations using CSS3 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(218, 78, 36);
border: 4px solid rgb(0, 0, 0);
position: relative;
animation: circleMove 5s infinite;
}
@keyframes circleMove {
from {
left: 0px;
border-radius: 0px;
}
to {
left: 200px;
border-radius: 50%;
}
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<div></div>
</body>
</html>
One animation with multiple selectors
An animation is set with more than one selectors. The CSS style for the selector is the top property. The percentage of animation duration is set for each selector. We have created a rectangle and animated it −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
border: 5px solid red;
position: relative;
animation: myrct 4s infinite;
}
@keyframes myrct {
0% {top: 0px;}
20% {top: 150px;}
40% {top: 80px;}
60% {top: 50px;}
80% {top: 80px;}
100% {top: 150px;}
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<p>Check the below animation...</p>
<div></div>
</body>
</html>
One animation with multiple selectors & styles
Not only selectors, but the styles can be changed each time with keyframes. The styles set includes the top, bottom, left properties. Also, at every step of animation, the background color and the text color change frequently −
@keyframes myrct {
0% {top: 0px; left: 10px; background: red; color: black;}
20% {bottom: 150px; left: 20px; background: green; color: white;}
40% {bottom: 80px; left: 50px; background: blue; color: white;}
60% {top: 50px; left: 75px; background: orange; color: white;}
80% {bottom: 80px; left: 50px; background: yellow; color: black;}
100% {bottom: 150px; left: 20px; background: navy; color: white;}
}
Example
Let us see an example for multiple selectors and styles to animate a rectangle −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
border: 5px solid red;
position: relative;
animation: myrct 4s infinite;
}
@keyframes myrct {
0% {top: 0px; left: 10px; background: red; color: black;}
20% {bottom: 150px; left: 20px; background: green; color: white;}
40% {bottom: 80px; left: 50px; background: blue; color: white;}
60% {top: 50px; left: 75px; background: orange; color: white;}
80% {bottom: 80px; left: 50px; background: yellow; color: black;}
100% {bottom: 150px; left: 20px; background: navy; color: white;}
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<p>Check the below animation...</p>
<div>Our rectangle</div>
</body>
</html>
146 Views
