About Keyframes
Keyframes are the building blocks of CSS animations. In move.gl, keyframes are used internally by the
animate_* utility classes. This page demonstrates how different keyframe animations look when
applied via the animation classes.
Beat Animations
Pulsing heartbeat-style animations using scale keyframes.
animate_beat
animate_beat_fade
animate_beat_double
Flash Animations
Attention-grabbing flash effects using opacity keyframes.
animate_flash
animate_flash_fade
animate_flash_strobe
animate_flash_fade_slow
Pulse Animations
Rhythmic pulsing effects using scale keyframes.
animate_pulse
animate_pulse_slow
animate_pulse_fast
animate_pulse_color
Scale Animations
Size-changing animations using transform scale keyframes.
animate_scale_expand
animate_scale_shrink
animate_zoom
animate_zoom_fade
Rotation Animations
Spinning and rotating animations using transform rotate keyframes.
animate_spin
animate_spin_reverse
animate_spin_pulse
animate_wobble
Translate Animations
Movement-based animations using transform translate keyframes.
animate_slide_in_right
animate_slide_in_down
animate_float
animate_bounce
Fade Animations
Opacity-based animations using fade keyframes.
animate_fade
animate_fade_in
animate_blink
animate_blink_soft
Skew & Jiggle Animations
Skewing and shearing animations using transform skew keyframes.
animate_jiggle
animate_jiggle_vertical
animate_shake
animate_shake_horizontal
3D Animations
3D transform-based animations using perspective and rotate3d keyframes.
animate_flip
animate_flip_horizontal
animate_swing
animate_tada
Combined Animations
Complex animations combining multiple keyframe properties.
animate_bounce_rotate
animate_pop
animate_elastic