Week 06: CSS Animations & Advanced

Unit II - Bringing Pages to Life

Making the web move, transform, and delight!

What You'll Learn

CSS Transitions - smooth property changes
CSS Transforms - rotate, scale, skew, translate
CSS Animations - keyframes and complex sequences
Responsive design with media queries

Hover me!

Pulsing

Press → or click Next to continue

CSS Transitions

Smooth animations between two states (e.g., hover)

Transition Properties

/* Individual properties */
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;

/* Shorthand */
transition: all 0.3s ease;

/* Multiple properties */
transition: background 0.3s,
            transform 0.5s ease-out;

Timing Functions

ease - slow start, fast, slow end (default)
linear - constant speed
ease-in - slow start
ease-out - slow end
ease-in-out - slow start and end

Example

.button {
    background: #3498db;
    padding: 15px 30px;
    transition: all 0.3s ease;
}

.button:hover {
    background: #2980b9;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

What Can Transition?

Most numeric properties: color, background, width, height, opacity, transform, box-shadow, etc.

Cannot transition: display, visibility (use opacity instead)

CSS Transforms

Modify an element's visual appearance without affecting layout

2D Transforms

/* Move element */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);

/* Rotate */
transform: rotate(45deg);

/* Scale (resize) */
transform: scale(1.5);      /* 150% */
transform: scale(2, 0.5);   /* x, y */

/* Skew (tilt) */
transform: skew(10deg, 5deg);

/* Combine multiple */
transform: translateX(50px) rotate(45deg) scale(1.2);

Transform Origin

/* Default is center */
transform-origin: center center;

/* Change the pivot point */
transform-origin: top left;
transform-origin: 0 0;
transform-origin: 100% 100%;

Live Demos

Rotate

Scale

Skew

Note: Transforms don't affect document flow - the element's original space is preserved!

CSS Animations with @keyframes

Complex, multi-step animations that run automatically

Define Animation

@keyframes slidein {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Or with percentages */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

Apply Animation

.element {
    animation-name: slidein;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

/* Shorthand */
animation: slidein 1s ease forwards;

/* Infinite animation */
animation: pulse 2s infinite;

Live Examples

Pulse

Bounce

Spin

Animation Properties Deep Dive

Property	Values	Description
`animation-duration`	1s, 500ms	How long one cycle takes
`animation-iteration-count`	1, 3, infinite	How many times to repeat
`animation-direction`	normal, reverse, alternate	Direction of playback
`animation-fill-mode`	none, forwards, backwards, both	State before/after animation
`animation-play-state`	running, paused	Pause/resume animation

animation-direction: alternate

Animation plays forward, then backward. Great for continuous effects!

animation: bounce 1s ease infinite alternate;

animation-fill-mode: forwards

Element stays at the final keyframe state after animation ends.

animation: fadeIn 1s forwards;

Practical Animation Examples

Loading Spinner

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #eee;
    border-top-color: #1abc9c;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

Fade In on Load

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeInUp 0.5s ease forwards;
}

Shake Effect (Error)

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.error {
    animation: shake 0.3s ease;
}

Typing Effect

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

.typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 3s steps(30);
}

Responsive Design with Media Queries

Apply different styles based on screen size, orientation, etc.

Basic Syntax

/* Mobile first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Common Breakpoints

Device	Width
Mobile	< 768px
Tablet	768px - 1023px
Desktop	1024px - 1199px
Large Desktop	≥ 1200px

Mobile First!

Write base styles for mobile, then add complexity for larger screens with min-width.

Advanced Media Queries

Combining Conditions

/* AND - both must be true */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet only */
}

/* OR - either can be true */
@media (max-width: 767px), (orientation: portrait) {
    /* Mobile OR portrait mode */
}

/* NOT */
@media not print {
    /* Everything except print */
}

Other Media Features

/* Orientation */
@media (orientation: landscape) { }

/* High-resolution screens */
@media (min-resolution: 2dppx) { }

/* Hover capability */
@media (hover: hover) {
    /* Device can hover */
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
}

Responsive Navigation Example

.nav {
    display: flex;
    flex-direction: column;
}

.nav-toggle {
    display: block;
}

@media (min-width: 768px) {
    .nav {
        flex-direction: row;
    }

    .nav-toggle {
        display: none;
    }
}

Accessibility: prefers-reduced-motion

Always respect user preferences! Some users get motion sickness from animations.

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

CSS Custom Properties (Variables)

Store values for reuse throughout your stylesheet

Defining Variables

/* Define in :root for global access */
:root {
    --primary-color: #1abc9c;
    --secondary-color: #3498db;
    --spacing: 20px;
    --border-radius: 8px;
    --font-main: 'Segoe UI', sans-serif;
}

/* Use with var() */
.button {
    background: var(--primary-color);
    padding: var(--spacing);
    border-radius: var(--border-radius);
    font-family: var(--font-main);
}

Why Use Variables?

Single source of truth for colors, sizes
Easy theme switching
Consistent design system
Easier maintenance

Fallback Values

color: var(--text-color, #333);
/* Uses #333 if --text-color is not defined */

Dark Mode Example

:root {
    --bg: white;
    --text: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a1a;
        --text: white;
    }
}

Animation Performance Tips

Performant Properties

These trigger GPU acceleration (fast!):

transform
opacity

Expensive Properties

These trigger layout recalculation (slow!):

width, height
margin, padding
top, left
font-size

Instead of animating width...

/* Bad */
width: 100px → width: 200px;

/* Good */
transform: scaleX(1) → scaleX(2);

Best Practices

Prefer transform and opacity
Use will-change sparingly
Keep animations under 300ms for UI
Test on low-end devices
Respect prefers-reduced-motion

will-change Property

/* Hint to browser about upcoming animation */
.animated-element {
    will-change: transform;
}

/* Remove after animation */
.animated-element.done {
    will-change: auto;
}

Don't overuse will-change! It consumes memory. Only use for complex animations.

CampusKart Milestone: Polish & Responsive

Deliverable: Polished, animated, mobile-responsive CampusKart

What to Add

Button hover effects (scale, color transitions)
Product card hover animation (lift + shadow)
Loading spinner for "Loading products..." state
Smooth transitions on nav links
Mobile responsive (cards stack, nav collapses)
Subtle entrance animations

Unit II Complete!

Your CampusKart now has structure (HTML) and style (CSS). Next unit: JavaScript makes it interactive!

Peer Showcase: Top 3 designs voted by class. Best Design Award!

Push to GitHub — "Unit II Complete" milestone commit.

Video Resources

Frontend Masters

CSS Animations Course

In-depth animation techniques

Animate.css

animate.style

Ready-to-use CSS animations library

Cubic Bezier

cubic-bezier.com

Create custom timing functions

Practice Exercises

Exercise 1: Animated Button

Hover effect with transform
Color transition
Box-shadow animation

Exercise 2: Loading Spinner

Create a spinning loader
Use @keyframes
Infinite animation

Exercise 3: Responsive Layout

Mobile-first design
Hamburger menu on mobile
Navigation changes on desktop

Exercise 4: Card Animations

Fade-in on scroll
Hover scale effect
Staggered animation delays

Examples to Study

View Week 06 Examples →

Week 06 Summary

Key Concepts

Transitions: Smooth changes between states
Transforms: rotate, scale, translate, skew
Animations: @keyframes for complex sequences
Media Queries: Responsive design
CSS Variables: Reusable custom properties
Performance: Prefer transform and opacity

Best Practices

Mobile-first responsive design
Use transitions for hover/focus states
Keep animations subtle and purposeful
Respect prefers-reduced-motion
Use CSS variables for consistency
Test performance on real devices

Coming Next Week

Week 07: JavaScript Fundamentals - Adding interactivity to web pages!