Animations
CSS animations let you create complex, multi-step motion sequences using @keyframes.
Demo: Bouncing Ball Animation
HTML
<div class="ball"></div> CSS
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-60px); }
}
.ball {
width: 50px;
height: 50px;
background: #6366f1;
border-radius: 50%;
margin: 40px auto;
animation: bounce 1s ease-in-out infinite;
}Live Output Window
Defining Keyframes
@keyframes animation-name {
from { /* starting state */ }
to { /* ending state */ }
}
/* Or percentage-based */
@keyframes animation-name {
0% { opacity: 0; }
50% { opacity: 0.5; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
Animation Properties
Demo: Pulsing Glow
HTML
<button class="pulse-btn">Click Me</button> CSS
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.7); }
70% { box-shadow: 0 0 0 15px rgba(99,102,241,0); }
100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.pulse-btn {
padding: 12px 28px;
background: #6366f1;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
animation: pulse 2s infinite;
}Live Output Window
Animation Shorthand
| Property | Description |
|---|---|
animation-name | Name of the @keyframes rule |
animation-duration | How long one cycle takes |
animation-timing-function | Speed curve |
animation-delay | Delay before starting |
animation-iteration-count | Number of times (infinite or number) |
animation-direction | normal, reverse, alternate |
animation-fill-mode | State before/after animation |
animation | Shorthand for all |
.element {
animation: slideIn 0.5s ease-out 0.2s 1 normal forwards;
}
Demo: Spinning Loader
HTML
<div class="loader"></div> CSS
@keyframes spin {
to { transform: rotate(360deg); }
}
.loader {
width: 40px;
height: 40px;
border: 4px solid #e2e8f0;
border-top-color: #6366f1;
border-radius: 50%;
margin: 20px auto;
animation: spin 0.8s linear infinite;
}Live Output Window