Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Define animation sequences with @keyframes
Control timing, duration, and iteration
Create complex multi-step animations
No JavaScript required
Hardware accelerated for performance
Support for multiple animations
Transitions: Simple A → B changes (hover effects)
Animations: Complex multi-step sequences with full control (keyframes)
<div class="container">
<div class="ball"></div>
</div>Loading preview...
Create animation sequence with multiple steps (0%, 50%, 100%)
@keyframes slide { 0% { left: 0; } 100% { left: 100px; } }Use animation property on element to run the sequence
.box { animation: slide 2s ease infinite; }@keyframes animationName {
0% {
opacity: 0;
transform: translateX(-100px);
}
50% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}.element {
animation: animationName 2s ease-in-out infinite;
/* Or use individual properties */
animation-name: animationName;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}from (0%) and to (100%) to define keyframe steps.| Property | Values | Description |
|---|---|---|
animation-name | keyframe-name | Name of the @keyframes animation |
animation-duration | time (2s, 500ms) | How long the animation takes |
animation-timing-function | ease, linear, ease-in, ease-out, cubic-bezier() | Speed curve of the animation |
animation-delay | time (1s, 200ms) | Delay before animation starts |
animation-iteration-count | number, infinite | How many times to play |
animation-direction | normal, reverse, alternate, alternate-reverse | Direction of animation playback |
animation-fill-mode | none, forwards, backwards, both | Style before/after animation |
animation-play-state | running, paused | Play or pause animation |
<div class="demo-container">
<div class="box fade-in">
<h4>Fade In</h4>
<p>Smooth entrance</p>
</div>
<div class="box fade-in-up">
<h4>Fade In Up</h4>
<p>From bottom</p>
</div>
<div class="box fade-in-down">
<h4>Fade In Down</h4>
<p>From top</p>
</div>
<div class="box fade-in-left">
<h4>Fade In Left</h4>
<p>From left side</p>
</div>
</div>Loading preview...
<div class="attention-grid">
<button class="btn pulse-btn">
💓 Pulse
</button>
<button class="btn shake-btn">
🔔 Shake
</button>
<button class="btn bounce-btn">
⬆️ Bounce
</button>
<button class="btn wiggle-btn">
🎵 Wiggle
</button>
</div>Loading preview...
<div class="loader-grid">
<div class="loader-item">
<div class="spinner"></div>
<p>Classic Spinner</p>
</div>
<div class="loader-item">
<div class="dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<p>Bouncing Dots</p>
</div>
<div class="loader-item">
<div class="pulse-ring"></div>
<p>Pulse Ring</p>
</div>
<div class="loader-item">
<div class="bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<p>Sound Bars</p>
</div>
</div>Loading preview...
<div class="notification-card">
<div class="icon-wrapper">
<div class="icon">✨</div>
<div class="glow"></div>
</div>
<div class="content">
<h3>Success!</h3>
<p>Your animation is working perfectly</p>
</div>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>Loading preview...
Infinite rotating animations for loading indicators
Pulse, bounce, shake animations to draw attention
Smooth entrance and exit animations for content
Visual responses to user actions and states
transform and opacity for performanceprefers-reduced-motion media querywidth, height, or top/left@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}will-change: transform to hint the browser about upcoming animations, but remove it after the animation completes to avoid memory issues.