☰

Transitions & Animations

transition

Creates smooth animation when property changes.

Hover Me
transition: all 1s ease;

transition-duration

Controls animation timing.

Hover Me
transition-duration: 1s;

transition-delay

Delay before animation starts.

Hover (1s Delay)
transition: 1s;
transition-delay: 1s;

transform

Rotate, scale, move or skew elements.

Hover
transform: rotate(15deg) scale(1.2);

animation

Runs keyframe-based animation.

Animated
@keyframes pulse {
   0% { transform: scale(1); }
   50% { transform: scale(1.2); }
   100% { transform: scale(1); }
}

animation: pulse 2s infinite;

animation-duration

How long animation takes.

3s Animation
animation-duration: 3s;

animation-iteration-count

How many times animation repeats.

1 Time
animation-iteration-count: 1;