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
Animation Effects in CSS
The animation is the process of creating motion effects and changing the appearance of elements. CSS supports different animation effects to create smooth transitions and dynamic visual changes on web pages.
CSS animations use a concept called keyframes to control the intermediate steps during the animation sequence. Keyframes define what styles the element will have at certain times during the animation.
Syntax
@keyframes animation-name {
from { /* starting styles */ }
to { /* ending styles */ }
}
/* Or with percentages */
@keyframes animation-name {
0% { /* starting styles */ }
50% { /* middle styles */ }
100% { /* ending styles */ }
}
selector {
animation-name: animation-name;
animation-duration: time;
}
Example: Basic Color Animation
The following example shows a simple color animation that changes the background from pink to green over 5 seconds −
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes colorChange {
from { background-color: pink; }
to { background-color: green; }
}
.animated-box {
width: 100px;
height: 100px;
background-color: pink;
animation-name: colorChange;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>
A 100x100px box appears that continuously animates from pink to green background color over 5 seconds, repeating infinitely.
Example: Multiple Property Animation
This example demonstrates animating multiple properties including size, color, and position −
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes complexAnimation {
0% {
width: 50px;
height: 50px;
background-color: red;
transform: translateX(0px);
}
50% {
width: 100px;
height: 100px;
background-color: blue;
transform: translateX(100px);
}
100% {
width: 50px;
height: 50px;
background-color: red;
transform: translateX(0px);
}
}
.multi-animation {
width: 50px;
height: 50px;
background-color: red;
animation: complexAnimation 3s ease-in-out infinite;
margin: 20px;
}
</style>
</head>
<body>
<div class="multi-animation"></div>
</body>
</html>
A small red box that grows larger and changes to blue while moving 100px to the right, then returns to its original state, repeating the animation infinitely every 3 seconds.
Animation Properties
| Property | Description | Example Values |
|---|---|---|
animation-name |
Specifies the keyframe name | myAnimation, slideIn |
animation-duration |
Animation length | 2s, 500ms |
animation-timing-function |
Speed curve | ease, linear, ease-in-out |
animation-iteration-count |
Number of repetitions | infinite, 3, 1 |
animation-direction |
Direction of animation | normal, reverse, alternate |
Conclusion
CSS animations with keyframes provide a powerful way to create smooth, engaging visual effects. By combining multiple properties and timing functions, you can create complex animations that enhance user experience on your website.
163 Views
