Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create CSS3 Keyframe Animations?
CSS3 keyframe animations allow you to create smooth, custom animations by defining specific animation steps. Keyframes control the intermediate steps of an animation sequence, letting you specify exactly how an element should change over time.
Syntax
@keyframes animationname {
selector {
styles;
}
}
Where:
animationname − The name of the animation
selector − The keyframe selector (percentage of animation duration or from/to)
styles − The CSS style properties to apply at this keyframe
Example: Animate Rectangle to Circle
This example creates a rectangle that transforms into a circle while moving horizontally. The animation uses from and to selectors −
<!DOCTYPE html>
<html>
<head>
<style>
.shape {
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>
<h3>Rectangle to Circle Animation</h3>
<div class="shape"></div>
</body>
</html>
A red rectangle with black border moves from left to right while transforming into a circle over 5 seconds, then repeats infinitely.
Example: Multiple Keyframe Selectors
You can define multiple keyframes using percentages to create complex animations. This example animates vertical movement at different stages −
<!DOCTYPE html>
<html>
<head>
<style>
.bouncing-box {
width: 150px;
height: 150px;
background: blue;
border: 5px solid red;
position: relative;
animation: bounce 4s infinite;
}
@keyframes bounce {
0% { top: 0px; }
20% { top: 150px; }
40% { top: 80px; }
60% { top: 50px; }
80% { top: 80px; }
100% { top: 150px; }
}
</style>
</head>
<body>
<h3>Bouncing Animation</h3>
<div class="bouncing-box"></div>
</body>
</html>
A blue rectangle with red border bounces up and down in a complex pattern, moving to different vertical positions at each animation stage over 4 seconds.
Example: Multiple Properties and Colors
Keyframes can animate multiple CSS properties simultaneously, including position, colors, and other styles −
<!DOCTYPE html>
<html>
<head>
<style>
.colorful-box {
width: 150px;
height: 150px;
position: relative;
animation: colorMove 4s infinite;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
@keyframes colorMove {
0% { top: 0px; left: 10px; background: red; color: white; }
20% { top: 150px; left: 20px; background: green; color: white; }
40% { top: 80px; left: 50px; background: blue; color: white; }
60% { top: 50px; left: 75px; background: orange; color: black; }
80% { top: 80px; left: 50px; background: yellow; color: black; }
100% { top: 150px; left: 20px; background: navy; color: white; }
}
</style>
</head>
<body>
<h3>Multi-Property Animation</h3>
<div class="colorful-box">Animated</div>
</body>
</html>
A rectangle moves in various directions while continuously changing background colors (red, green, blue, orange, yellow, navy) and text colors over 4 seconds, creating a dynamic multi-property animation.
Conclusion
CSS3 keyframe animations provide powerful control over element animations by defining specific animation steps. Use percentages or from/to selectors to create smooth transitions between different states of CSS properties.
350 Views
