CSS Animations & Transitions - Last Minute Notes
🔥 What is Animation?
Animation = Making elements move/change over time
Changes CSS properties smoothly
Creates visual effects
Makes websites interactive
Types of Web Animation:
1. CSS Transitions - Simple A to B changes
2. CSS Animations - Complex multi-step changes
3. JavaScript Animations - Full control with code
📊 Start and End States
Start State (Initial)
css
.box {
width: 100px;
background: red;
/* This is START state */
}
End State (Final)
css
.box:hover {
width: 200px;
background: blue;
/* This is END state */
}
Key Point: Animation happens BETWEEN start and end states.
🔄 Interpolation
Interpolation = Browser automatically calculates intermediate values
Example:
Start: width: 100px
End: width: 200px
Browser creates: 120px, 140px, 160px, 180px...
What Can Be Interpolated?
✅ Numbers (width, height, opacity)
✅ Colors (red to blue)
✅ Lengths (px, em, %)
❌ Display property
❌ Font-family
🌟 CSS Transitions
Basic Syntax:
css
transition: property duration timing-function delay;
Simple Example:
css
.button {
background: blue;
transition: background 0.3s ease;
}
.button:hover {
background: red;
}
Transition Properties:
Property What it does Example
transition-property Which CSS property to animate width , all
transition-duration How long animation takes 2s , 500ms
transition-timing-function Speed curve ease , linear
transition-delay Wait before starting 1s
Timing Functions:
ease - Slow start, fast middle, slow end
linear - Same speed throughout
ease-in - Slow start
ease-out - Slow end
ease-in-out - Slow start and end
🎬 CSS Animations
Why Use Animations?
Multiple steps (not just A to B)
Can repeat
More control
Complex effects
Basic Structure:
css
/* 1. Define animation */
@keyframes myAnimation {
0% { /* start */ }
50% { /* middle */ }
100% { /* end */ }
}
/* 2. Apply to element */
.element {
animation: myAnimation 2s ease infinite;
}
🔑 Keyframes Deep Dive
What are Keyframes?
Keyframes = Specific points in animation timeline
Keyframe Syntax:
css
@keyframes animationName {
from { /* same as 0% */ }
to { /* same as 100% */ }
}
/* OR */
@keyframes animationName {
0% { opacity: 0; }
25% { opacity: 0.5; }
50% { opacity: 1; }
75% { opacity: 0.5; }
100% { opacity: 0; }
}
Multiple Keyframes Example:
css
@keyframes bounce {
0% { transform: translateY(0); }
25% { transform: translateY(-20px); }
50% { transform: translateY(0); }
75% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
⚙️ Animation Properties
Complete Animation Syntax:
css
animation: name duration timing-function delay iteration-count direction fill-mode;
Individual Properties:
Property Values Example
animation-name Keyframe name slideIn
animation-duration Time 2s , 500ms
animation-timing-function Speed curve ease , linear
animation-delay Wait time 1s
animation-iteration-count How many times 3 , infinite
animation-direction Forward/backward normal , reverse , alternate
animation-fill-mode Before/after states forwards , backwards , both
Animation Direction:
normal - Forward only
reverse - Backward only
alternate - Forward then backward
alternate-reverse - Backward then forward
Fill Mode:
forwards - Stay at end state
backwards - Start at first keyframe
both - Apply both forwards and backwards
🔄 Multiple Animations
Separate Animations:
css
.element {
animation:
slideIn 1s ease,
fadeIn 2s linear,
rotate 3s infinite;
}
Multiple Keyframes:
css
@keyframes slideAndFade {
0% {
opacity: 0;
transform: translateX(-100px);
}
50% {
opacity: 0.5;
transform: translateX(0);
}
100% {
opacity: 1;
transform: translateX(100px);
}
}
🚀 Longhand vs Shorthand Properties
Longhand (Individual):
css
.element {
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 0.5s;
}
Shorthand (Combined):
css
.element {
transition: width 2s ease 0.5s;
}
Tip: Shorthand is faster to write, longhand gives more control.
🎯 Quick Practice Questions
1. What does this code do?
css
.box {
transition: all 0.5s ease;
}
Answer: Animates ALL properties for 0.5 seconds with ease timing
2. Fix this keyframe:
css
@keyframes wrong {
start { opacity: 0; }
finish { opacity: 1; }
}
Answer:
css
@keyframes correct {
0% { opacity: 0; }
100% { opacity: 1; }
}
3. What's the difference?
animation-iteration-count: 3
animation-iteration-count: infinite
Answer: First runs 3 times, second runs forever
🔥 Common Exam Questions
Multiple Choice Questions:
Q1: Which property is used to define keyframes?
a) @animation
b) @keyframes ✓
c) @transition
d) @animate
Q2: What does transition: all 2s mean?
a) Animate all elements for 2 seconds
b) Animate all properties for 2 seconds ✓
c) Wait 2 seconds then animate
d) Repeat animation 2 times
Q3: Which is NOT a valid timing function?
a) ease
b) linear
c) smooth ✓
d) ease-in-out
Q4: animation-fill-mode: forwards means:
a) Animation plays forward
b) Element keeps end state after animation ✓
c) Animation starts immediately
d) Animation repeats forward
Q5: To make animation run forever:
a) animation-duration: infinite
b) animation-iteration-count: infinite ✓
c) animation-repeat: infinite
d) animation-loop: infinite
💡 Quick Code Examples
Fade In Effect:
css
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-element {
animation: fadeIn 1s ease;
}
Slide In from Left:
css
@keyframes slideInLeft {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
Pulsing Button:
css
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.pulse-button {
animation: pulse 1s ease infinite;
}
Hover Transition:
css
.hover-box {
background: blue;
transform: scale(1);
transition: all 0.3s ease;
}
.hover-box:hover {
background: red;
transform: scale(1.2);
}
⚡ Last-Minute Tips
Remember:
1. Transitions need a trigger (hover, click)
2. Animations run automatically
3. Always define 0% and 100% keyframes
4. Use transform for better performance
5. Test animations on different devices
Performance Tips:
Animate transform and opacity (GPU accelerated)
Avoid animating width , height , top , left
Use will-change property for complex animations
Browser Support:
Use vendor prefixes for older browsers:
css
-webkit-animation: myAnimation 1s;
-moz-animation: myAnimation 1s;
animation: myAnimation 1s;
🎯 Final Checklist
Before exam, make sure you know:
Difference between transitions and animations
How to write keyframes
All animation properties
Timing functions
Fill modes and directions
Multiple animations syntax
Performance considerations
Good Luck! 🚀
