Nearby lessons
8 of 15🎬 CSS Animations
📌 What are CSS Animations?
CSS animations allow you to create engaging visual transitions between style states using @keyframes and animation properties — no JavaScript needed!
📽️ Introduction to CSS Animations
CSS animations let you:
- Create smooth transitions between CSS property values
- Control timing, duration, and repetition
- Avoid JavaScript for simple animations
- Optimize performance, especially on mobile
📉 Animation Syntax - 1 : from to
Define an animation by setting the starting and ending values of properties.
@keyframes example {
from { CSS Properties }
to { CSS Properties }
}📊 Animation Syntax - 2 : Percentage Syntax
Use percentage values to define multiple steps of an animation timeline.
@keyframes example {
0% { CSS Properties }
50% { CSS Properties }
100% { CSS Properties }
}
🛠️ Border Radius Animation
Demonstrates smooth border-radius animation from square to circle.
Code Example
PREVIEW READY
🌈 Color Change Animation
This animation transitions the background color through multiple colors.
Code Example
PREVIEW READY
🏀 Bounce Animation
This animation makes an element bounce vertically using the transform property.
Code Example
PREVIEW READY
🏀 Animation Timing Function Values
Demonstrates different animation-timing-function values like linear, ease, ease-in, ease-out, and ease-in-out.
Code Example
PREVIEW READY
✅ Best Practices for CSS Animations
- ⚡ Prefer animating transform and opacity for performance
- 👀 Avoid overusing animations — keep them subtle
- 🎚️ Use
prefers-reduced-motionto respect user settings - ⏱️ Stick to 200–500ms durations for good UX
- 📱 Test performance, especially on mobile devices
📘 CSS Animation Properties
| Attribute | Description |
|---|---|
animation | Shorthand for all animation properties |
animation-name | Name of the @keyframes animation |
animation-duration | Time to complete one cycle (e.g., 2s, 500ms) |
animation-timing-function | Speed curve of the animation (e.g., ease, linear) |
animation-delay | Delay before animation starts |
animation-iteration-count | Number of times the animation repeats |
animation-direction | Whether animation reverses (e.g., alternate) |
animation-fill-mode | Applies styles before/after animation (e.g., both) |
animation-play-state | Running or paused animation state |
🧠 Test Your Knowledge
5 QuestionsProgress: 0 / 5
Keep Going!CSS - Transitions