Animations bring websites to life by adding movement and visual effects to elements. They make websites feel more interactive, responsive, and modern.
CSS provides four major animation-related features:
These features are commonly used for:
Animations improve:
Example:
Without Animation
Button
With Animation
Hover
↓
Button Grows Smoothly
The transform property changes an element's appearance without affecting the document layout.
Using transform, you can:
The translate() function moves an element.
transform: translate(x, y);
.box {
transform: translate(50px, 20px);
}
Result:
transform: translateX(100px);
transform: translateY(50px);
The scale() function changes the size of an element.
transform: scale(value);
transform: scale(1.2);
Result:
transform: scale(0.8);
Result:
The rotate() function rotates an element.
transform: rotate(angle);
transform: rotate(45deg);
Result:
transform: rotate(360deg);
The skew() function tilts an element.
transform: skew(x-angle, y-angle);
transform: skew(20deg);
Result:
Multiple transform functions can be combined.
transform: translateY(-10px) scale(1.05);
.card:hover {
transform: translateY(-10px) scale(1.02);
}
This creates a popular card hover effect.
Transitions create smooth changes between two states.
Without Transition
Hover
↓
Instant Change
With Transition
Hover
↓
Smooth Change
transition: property duration;
button {
transition: background-color 0.3s;
}
button {
background: blue;
transition: background 0.3s;
}
button:hover {
background: red;
}
Result:
Blue
↓
Smoothly turns Red
A transition can include four values.
transition:
property
duration
timing-function
delay;
Example
transition: all 0.3s ease 0s;
Controls how long the transition takes.
transition-duration: 0.5s;
or
transition: all 500ms;
Timing functions control the speed of an animation.
transition-timing-function: linear;
Constant speed.
transition-timing-function: ease;
Starts slowly, speeds up, then slows down.
(Default)
transition-timing-function: ease-in;
Starts slowly.
transition-timing-function: ease-out;
Ends slowly.
transition-timing-function: ease-in-out;
Slow start and slow end.
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
}
Keyframes define the stages of an animation.
They describe:
Start
↓
Middle
↓
End
@keyframes animation-name {
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
The animation property applies a keyframe animation to an element.
animation: name duration;
.box {
animation: fadeIn 1s;
}
| Property | Purpose |
|---|---|
| animation-name | Keyframe name |
| animation-duration | Animation speed |
| animation-delay | Delay before starting |
| animation-iteration-count | Number of repetitions |
| animation-direction | Direction of animation |
| animation-fill-mode | Keeps styles before or after animation |
| animation-timing-function | Motion style |
animation-duration: 2s;
Animation lasts 2 seconds.
animation-delay: 1s;
Waits 1 second before starting.
Run once
animation-iteration-count: 1;
Run forever
animation-iteration-count: infinite;
Normal
animation-direction: normal;
Reverse
animation-direction: reverse;
Alternate
animation-direction: alternate;
Runs forward, then backward.
Controls styles before and after the animation.
Forwards
animation-fill-mode: forwards;
Keeps the final state.
Backwards
animation-fill-mode: backwards;
Applies starting styles immediately.
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.hero {
animation: fadeIn 1s ease;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
Apply Animation
.card {
animation: slideUp 0.5s ease;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loader {
animation: spin 1s linear infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.button {
animation: pulse 2s infinite;
}
<button class="btn">
Click Me
</button>
.btn {
background: blue;
color: white;
transition: transform 0.3s ease;
}
.btn:hover {
transform: scale(1.05);
}
.card {
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
Commonly used in:
Good
transform: translateY(-10px);
Avoid
top: -10px;
Transforms are more performant because they don't trigger layout recalculations.
Recommended durations:
Avoid long animations like 5s or 10s for user interactions.
transition: all 0.3s ease;
This creates natural-looking motion.
Animations should improve the user experience, not distract users.
| Feature | Purpose |
|---|---|
| transform | Move, rotate, scale, or skew elements |
| translate() | Move an element |
| scale() | Resize an element |
| rotate() | Rotate an element |
| skew() | Tilt an element |
| transition | Smooth changes between states |
| @keyframes | Define animation stages |
| animation | Apply keyframes |
| animation-duration | Animation speed |
| animation-delay | Delay before starting |
| animation-iteration-count | Repeat animation |
Modern CSS animations usually combine transform and transition for smooth interactions.
transform: translateY(-10px);
transition: all 0.3s ease;
For more advanced effects, use @keyframes and the animation property.
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.hero {
animation: fadeIn 1s ease;
}
Remember these four concepts:
Together, they form the foundation of modern, interactive web interfaces.