@keyframes
/* Define the animation */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* With multiple stops */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Easing per step */
@keyframes bounce {
0%, 100% { transform: translateY(0); animation-timing-function: ease-in; }
50% { transform: translateY(-20px); animation-timing-function: ease-out; }
}
Animation Properties
| Property | Default | Description |
|---|
| animation-name | none | Name of the @keyframes rule |
| animation-duration | 0s | How long one cycle takes |
| animation-timing-function | ease | Speed curve per cycle |
| animation-delay | 0s | Wait before starting. Negative = start mid-animation |
| animation-iteration-count | 1 | Number of cycles. infinite = loop forever |
| animation-direction | normal | normal | reverse | alternate | alternate-reverse |
| animation-fill-mode | none | Styles before/after animation (see below) |
| animation-play-state | running | running | paused — toggle with JS |
Shorthand
/* animation: name duration timing delay iterations direction fill-mode */
animation: fadeUp 0.4s ease 0.1s 1 normal forwards;
/* Multiple animations */
animation: fadeUp 0.4s ease forwards, pulse 2s ease-in-out 0.5s infinite;
animation-fill-mode Explained
| Value | Before animation | After animation |
|---|
| none | Original styles | Original styles (snaps back) |
| forwards | Original styles | Last keyframe styles (stays put) |
| backwards | First keyframe styles | Original styles |
| both | First keyframe styles | Last keyframe styles |
/* Most common — element starts invisible, fades in and stays */
.fade-in {
opacity: 0;
animation: fadeIn 0.4s ease forwards; /* forwards keeps final state */
}
@keyframes fadeIn { to { opacity: 1; } }
Practical Examples
/* Staggered entrance animation */
.card { opacity: 0; animation: fadeUp 0.4s ease forwards; }
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }
/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; }
/* Floating effect */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.mascot { animation: float 4s ease-in-out infinite; }
/* Pause on hover */
.card:hover .mascot { animation-play-state: paused; }