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 dynamically create \'@-Keyframe\' CSS animations?
In CSS, the @keyframes rule specifies a sequence of styles that an element should go through during the animation. The @keyframes rule allows you to create dynamic animations by defining specific points (keyframes) in an animation timeline where certain CSS properties should have particular values.
These styles are then applied to elements via the animation property, which sets the animation's duration, timing function, and other properties to create smooth transitions between keyframe states.
Syntax
@keyframes animation-name {
0% { /* CSS properties */ }
50% { /* CSS properties */ }
100% { /* CSS properties */ }
}
/* Alternative percentage keywords */
@keyframes animation-name {
from { /* Starting properties */ }
to { /* Ending properties */ }
}
Visual Representation
Properties
Key CSS properties commonly used with @keyframes animations
animation-name References the @keyframes rule name
animation-duration Sets how long the animation takes to complete
animation-iteration-count Defines how many times the animation repeats
animation-timing-function Controls the speed curve of the animation
transform Applies 2D or 3D transformations (translate, rotate, scale)
opacity Controls the transparency level during animation
Example 1: Moving Circle Animation
This example creates a circular element that moves along different positions using keyframes
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
color: #333;
margin-bottom: 50px;
}
.container {
position: relative;
height: 400px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
overflow: hidden;
}
.animated-circle {
width: 60px;
height: 60px;
position: absolute;
animation: circleMove 4s infinite;
border-radius: 50%;
background: linear-gradient(45deg, #ff6b6b, #ffd93d);
top: 20px;
left: 20px;
}
@keyframes circleMove {
0% { transform: translate(0, 0); }
25% { transform: translate(300px, 0); }
50% { transform: translate(300px, 200px); }
75% { transform: translate(0, 200px); }
100% { transform: translate(0, 0); }
}
</style>
</head>
<body>
<h1>Moving Circle Animation</h1>
<div class="container">
<div class="animated-circle"></div>
</div>
</body>
</html>
A colorful gradient circle moves in a rectangular path within a purple gradient container, completing the cycle every 4 seconds.
Example 2: Pulsing Effect with Color Change
This example demonstrates a pulsing animation that changes both size and color
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: #1a1a2e;
}
.pulse-box {
width: 100px;
height: 100px;
border-radius: 15px;
animation: pulseEffect 3s infinite;
}
@keyframes pulseEffect {
0% {
transform: scale(1);
background: #ff6b6b;
box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}
33% {
transform: scale(1.3);
background: #4ecdc4;
box-shadow: 0 0 30px rgba(78, 205, 196, 0.7);
}
66% {
transform: scale(0.8);
background: #45b7d1;
box-shadow: 0 0 40px rgba(69, 183, 209, 0.9);
}
100% {
transform: scale(1);
background: #ff6b6b;
box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
}
}
</style>
</head>
<body>
<div class="pulse-box"></div>
</body>
</html>
A rounded square continuously pulses between different sizes and colors (red, teal, blue) with glowing shadow effects on a dark background.
Conclusion
The @keyframes rule provides precise control over CSS animations by defining specific states at different percentages of the animation timeline. Combined with the animation property, it creates smooth, dynamic effects that enhance user experience and visual appeal.
722 Views
