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! 🚀