CSS Latte Art: Module 4

← Dashboard
Module 4: The Dynamic Steam

Animations & Transitions

Transitions for smooth hover effects, keyframes for custom animations, and transform for rotate, scale, and skew.

/* Transition - smooth hover */
transition: all 0.3s ease;

/* Keyframe animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
animation: float 2s ease-in-out infinite;

/* Transform */
transform: rotate(15deg) scale(1.1);

Try the Hover

Pro Tip

Prefer transform over position/width for animations — GPU accelerated.

Transform

rotate(), scale(), translate(), skew() — all in 2D or 3D.