CSS Transitions and Animations

Professional Laboratory Activities using CSS and JavaScript

Exercise B — Loading Spinner

This animation demonstrates a rotating loading spinner using @keyframes and infinite linear animation timing.

Exercise C — Animated Card

Use JavaScript buttons to trigger a slide-in animation and reverse animation.

Animated Card

This card smoothly slides into view using CSS animations.

Exercise D — Sequence of Animations

The boxes animate one after another using animation delays.