Css Module 56

  Module 56 : Advanced CSS Animations Project – Building a CSS-only interactive animation. 

Section 1: Introduction to Advanced CSS Animations

Key Concepts:

CSS Transitions vs Animations

@keyframes and control of animation stages

Timing functions (ease-in, ease-out, cubic-bezier)

Infinite looping, delay, and direction

Pseudo-classes (:hover, :checked, :focus)

transform and opacity manipulation

Creating state changes via form elements for interactivity

Section 2: Planning the Interactive Animation Project

Components:

A card that flips on hover or click.

Smooth animation using @keyframes.

Dynamic visual effects (like glow, scaling, etc.)

Checkbox or radio inputs to simulate interactivity.

Optional: Chain multiple animations.

Section 3: Building the Card 

Step 1: HTML Structure

html

code

<div class="card-container"> <input type="checkbox" id="flip-toggle" /> <label class="card" for="flip-toggle"> <div class="card-face front">Front</div> <div class="card-face back">Back</div> </label> </div>

Explanation:

A hidden checkbox is used to store state.

Label and for attribute tie the card to the checkbox.

.front and .back divs represent the two sides.

Step 2: CSS Styling and Animation

css

 code

.card-container { perspective: 1000px; } #flip-toggle { display: none; } .card { width: 200px; height: 300px; position: relative; transition: transform 0.8s; transform-style: preserve-3d; cursor: pointer; } .card-face { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; border-radius: 10px; } .front { background: linear-gradient(45deg, #4e54c8, #8f94fb); } .back { background: linear-gradient(45deg, #ff758c, #ff7eb3); transform: rotateY(180deg); } #flip-toggle:checked + .card { transform: rotateY(180deg); }

Explanation of Key Parts:

perspective: Gives the 3D effect.

transform-style: preserve-3d: Keeps both sides visible for flipping.

backface-visibility: Hides the back of each side when not visible.

rotateY(180deg): Flips the card.

Section 4: Enhancing the Animation

Advanced Features to Add:

Glow on hover:

css

 code

.card:hover { box-shadow: 0 0 30px rgba(255, 255, 255, 0.6); }

Delayed text animation on flip:

css

code

.back { animation: fadeIn 1s ease-in-out 0.5s forwards; opacity: 0; } @keyframes fadeIn { to { opacity: 1; } }

Section 5: Exercises

Exercise 1: Color Morphing Animation

Make the card background cycle through colors infinitely:

css

 code

@keyframes morphColor { 0% { background-color: #4e54c8; } 50% { background-color: #8f94fb; } 100% { background-color: #4e54c8; } } .front { animation: morphColor 5s infinite; }

Exercise 2: Add Multiple Cards with Staggered Animation

css

 code

.card:nth-child(1) { animation-delay: 0s; } .card:nth-child(2) { animation-delay: 0.3s; } .card:nth-child(3) { animation-delay: 0.6s; }

Exercise 3: Custom Easing Function

           

Css

 code

.card { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); }

Section 6: Build a Toggleable Navigation Menu with Pure CSS

Concepts Used:

Hamburger icon transforms into "X"

:checked state for menu open/close

Slide animation using transform: translateX()

Section 7: Wrap-Up and Reflection

Discussion Questions:

What are the limitations of CSS-only animations?

Where can CSS-only interactivity be preferable to JavaScript?

How would you enhance accessibility in such interactive elements?