CSS Animations

Sandbox — five animation & transition experiments

01

Button rollovers

Three transition styles using transition on hover. Fill swap, outline fill, and scale-up.

background-color, color, transform — transition: 0.3s ease

02

Image hover effects

Three image transitions: grayscale to color, zoom-in, and an overlay reveal using opacity.

grayscale → color

zoom in

overlay reveal

View
filter: grayscale() — transform: scale() — opacity on .img-overlay

03

Text effects

Underline slide-in using a pseudo-element, letter-spacing shift on hover, and a fade-up entrance animation.

hover me

Underline slide in

hover me

Letter spacing shift

on load

Fade up entrance
::after width 0 to 100% — letter-spacing transition — @keyframes fadeUp

04

Card lift (rollover)

Portfolio-style project cards that lift on hover using translateY and a deeper box-shadow.

Project one

Photography / 2025

Project two

Design / 2025

Project three

Illustration / 2024

transform: translateY(-10px) — box-shadow deepens — transition: 0.3s ease

05

Keyframe animations

Looping animations using @keyframes: a spinner, pulsing dot, bouncing bars, and a sliding pill.

spin

pulse

bounce

slide

@keyframes spin / pulse / bounce / slide — animation-delay staggers bars
CSS Animations Sandbox