We use cookies to improve your experience on our website. By clicking “Accept all’, you agree to the use of all cookies. More information
Settings
Reject allAccept all

CSS Animations

This notice contains a code embed for <style> overrides.

Introduction

Lightweight animations that uses CSS can bring attention to certain sections. Rather than excessive usage of Webflow interactions, these can be a better alternative for site performance.

For styles, UI elements like buttons and modals, visit the Style Guide page. For interactive or section components, visit Components.

Animate.css

All animations use CSS classes imported from Animate.css - all elements with animations start with the class .animate__animated . For additional classes and animations, see Animate.css. Refresh to see the animations play.

Bounce Animation — .animate__bounce

Animated Element

Bounce Animation (3s Delay) — .animate__delay-3s

Animated Element

Bounce Animation (Faster - 500ms) — .animate__faster

Animated Element

Bounce Animation (Repeat 3x) — .animate__repeat-3

Animated Element

Animista

All animations are sourced from Animista which are copied into the code embed below. All animations are keyframes only, classes are fully customisable. For this example, the class names start with the prefix "animista" followed by the keyframe animation name (e.g. .animista_flip-horizontal-top). Refresh to see the animations play.

Flip Horizontal Top
Rotate Center