transitions_and_animation.md

Transitions and animation

• Animation
• Transition Delay
• Transition Duration
• Transition Property
• Transition Timing Function

---

Animation

Utilities for animating elements with CSS animations.

Group

TailwindJS token
animation_utilities

Utilities

TailwindJS token	TailwindCSS token
animate_bounce	animate-bounce
animate_none	animate-none
animate_ping	animate-ping
animate_pulse	animate-pulse
animate_spin	animate-spin

Arbitraries

TailwindJS token	TailwindCSS token
animate_arbitrary, animate_arb	animate-[…]

Transition Delay

Utilities for controlling the delay of CSS transitions.

Group

TailwindJS token
transition_delay_utilities

Utilities

TailwindJS token	TailwindCSS token
delay_0	delay-0
delay_100	delay-100
delay_1000	delay-1000
delay_150	delay-150
delay_200	delay-200
delay_300	delay-300
delay_500	delay-500
delay_700	delay-700
delay_75	delay-75

Arbitraries

TailwindJS token	TailwindCSS token
delay_arbitrary, delay_arb	delay-[…]

Transition Duration

Utilities for controlling the duration of CSS transitions.

Group

TailwindJS token
transition_duration_utilities

Utilities

TailwindJS token	TailwindCSS token
duration_0	duration-0
duration_100	duration-100
duration_1000	duration-1000
duration_150	duration-150
duration_200	duration-200
duration_300	duration-300
duration_500	duration-500
duration_700	duration-700
duration_75	duration-75

Arbitraries

TailwindJS token	TailwindCSS token
duration_arbitrary, duration_arb	duration-[…]

Transition Property

Utilities for controlling which CSS properties transition.

Group

TailwindJS token
transition_property_utilities

Utilities

TailwindJS token	TailwindCSS token
transition	transition
transition_all	transition-all
transition_colors	transition-colors
transition_none	transition-none
transition_opacity	transition-opacity
transition_shadow	transition-shadow
transition_transform	transition-transform

Arbitraries

TailwindJS token	TailwindCSS token
transition_arbitrary, transition_arb	transition-[…]

Transition Timing Function

Utilities for controlling the easing of CSS transitions.

Group

TailwindJS token
transition_timing_function_utilities

Utilities

TailwindJS token	TailwindCSS token
ease_in	ease-in
ease_in_out	ease-in-out
ease_linear	ease-linear
ease_out	ease-out

Arbitraries

TailwindJS token	TailwindCSS token
ease_arbitrary, ease_arb	ease-[…]
ease_in_arbitrary, ease_in_arb	ease-in-[…]