Transitions, Transforms & Animations

Bring web UIs to life with smooth hover states, hardware-accelerated 2D/3D transforms, keyframe animations, and accessibility best practices.

CSS Transitions

Transitions define the speed and easing curve when property values change (e.g. on :hover, :focus, or active state toggles). Shorthand: transition: <property> <duration> <timing-function> <delay>;

transitions.css

1.btn {
2  background-color: #3b82f6;
3  transform: translateY(0);
4  /* Smoothly transition transform and background over 0.2s */
5  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
6}
7 
8.btn:hover {
9  background-color: #2563eb;
10  transform: translateY(-2px);
11}

2D & 3D Transforms

The transform property modifies the visual geometry of an element without affecting document flow or triggering heavy browser layout re-calculations. Core Functions: • translate(x, y) / translate3d(x, y, z): Moves element. • scale(x, y): Enlarges or shrinks element. • rotate(deg) / rotateY(deg): Rotates element. • skew(x, y): Skews element axes.

transforms.css

1.card-hover {
2  transition: transform 0.3s ease;
3}
4 
5.card-hover:hover {
6  transform: scale(1.05) rotate(1deg);
7}

Keyframe Animations (@keyframes)

Keyframes give you granular control over intermediate steps in an animation sequence beyond simple start and end states.

keyframes.css

1/* Define keyframe steps */
2@keyframes pulse-glow {
3  0% {
4    transform: scale(1);
5    opacity: 1;
6  }
7  50% {
8    transform: scale(1.08);
9    opacity: 0.7;
10  }
11  100% {
12    transform: scale(1);
13    opacity: 1;
14  }
15}
16 
17/* Apply to element */
18.badge-pulsing {
19  animation: pulse-glow 2s infinite ease-in-out;
20}

Accessibility: prefers-reduced-motion

Certain users experience vestibular motion sickness or dizziness from screen animations. Operating systems provide a "Reduce Motion" setting. In CSS, respect this setting with prefers-reduced-motion.

reduced-motion.css

1@media (prefers-reduced-motion: reduce) {
2  *, ::before, ::after {
3    animation-duration: 0.01ms !important;
4    animation-iteration-count: 1 !important;
5    transition-duration: 0.01ms !important;
6    scroll-behavior: auto !important;
7  }
8}

Key Takeaways

1.CSS Transitions smooth out property changes over time on hover or focus states.
2.CSS Transforms (translate, scale, rotate, skew) alter dimensions without triggering browser layout re-paints.
3.Keyframe Animations (@keyframes) enable multi-step complex animation sequences.
4.Always animate transform and opacity for maximum 60fps hardware-accelerated performance.
5.Respect user motion sensitivities with @media (prefers-reduced-motion: reduce).

Responsive Web Design & Media Queries

Notes/CSS3/Transitions, Transforms & Animations

intermediate10 min read