Preset gallery
Every animation key shipped in vivace.css. Click a card to replay it — each demo
uses the first variant listed.
Modifiers
_ease Easing
Timing curve for the whole composition.
_ease-lin_ease-in_ease-out_ease-in-out_ease-circ_ease-in-circ_ease-out-circ_ease-back_ease-in-back_ease-out-back_ease-expo_ease-in-expo_ease-out-expo_delay Delay
Start delay in 0.1s steps.
_delay-1_delay-2_delay-3_delay-4_delay-5_delay-6_delay-7_delay-8_speed Speed
Duration multiplier: up is faster, down is slower.
_speed-up_speed-up+_speed-up++_speed-up+++_speed-down_speed-down+_speed-down++_speed-down+++_lv Level
Intensity: scales distances, angles and spring amplitude.
_lv-up_lv-up+_lv-up++_lv-up+++_lv-down_lv-down+_lv-down++_lv-down+++_origin Origin
Transform origin: t/r/b/l and corners (lt, rt, rb, lb).
_origin-t_origin-rt_origin-r_origin-rb_origin-b_origin-lb_origin-l_origin-lt_repeat Repeat
Iteration count; bare token loops forever.
_repeat_repeat-2_repeat-3_repeat-4_repeat-5_alt Direction
Alternate (there-and-back) or reversed playback.
_alt_alt-rev_rev_child Children
Animate direct children instead, staggered in sequence.
_child-ascend_child-descend_child-odd_child-even_child-ascend-up_child-ascend-down