GPU Accelerated
Click to replay
Over 130 production-ready keyframe animations. Pick a category, tune the settings, choose a trigger mode — then export clean CSS, HTML, React or Tailwind code in one click. No signup, no watermarks, completely free.
IntersectionObserver with no extra dependencies.@keyframes block plus the animation class rule — paste directly into any stylesheet or <style> tag.<style> and <script> — drop it into any page and it works immediately.style object for JSX elements. Works with any React or Next.js component without a separate CSS file.extend.keyframes and extend.animation entries for tailwind.config.js.animation-duration controls how long one cycle takes — 300ms feels snappy, 800ms feels smooth. animation-delay staggers the start, useful for list reveals. animation-timing-function shapes the speed curve: ease-out feels natural for entrances, ease-in for exits, custom cubic-bezier curves give you spring and bounce. Set animation-iteration-count to a number or infinite for loops. Use animation-direction: alternate to reverse on every other cycle. animation-fill-mode: both is the safest default — it holds start styles during a delay and locks end styles after the animation finishes.
The GPU Accelerated badge means the animation uses only transform and opacity — the browser compositor handles these entirely on the GPU with zero layout recalculations. The Paint Layer badge appears for filter and box-shadow animations — they repaint pixels but skip layout. The Layout Triggered badge flags animations that change width, height, top or other box-model properties, which force a full layout pass on every frame. Always prefer GPU-accelerated animations in production.
@keyframes and the animation shorthand. It runs entirely in the browser without JavaScript, can loop, reverse, pause and resume, and degrades gracefully on older browsers.@keyframes block and the class rule into your stylesheet, then add the class name to your HTML element. For React use the React tab to get a style object. For Tailwind, copy the config snippet into the extend block of your tailwind.config.js.animation-fill-mode: both applies the first keyframe styles before the animation starts (during any delay) and holds the last keyframe styles after it ends. This prevents the element from snapping back to its original position — it is the most reliable setting for entrance and exit animations.animation-iteration-count: infinite. Combine it with animation-direction: alternate for a smooth ping-pong loop that reverses on each cycle.IntersectionObserver snippet that adds the animation class only when the element enters the viewport. It is a lightweight, dependency-free alternative to libraries like AOS or ScrollReveal — no extra packages required.prefers-reduced-motion is a CSS media query that detects whether the user has enabled reduced-motion in their OS settings — common for people with vestibular disorders. When the checkbox is enabled, the generated code wraps animation: none !important inside that query so the element stays static for those users.style object you can pass directly to any JSX element. Alternatively add the @keyframes to a global CSS file, a CSS Module, or a styled-component, then apply the class name as normal.@keyframes to define multiple steps and can play automatically, loop, delay and run without any state-change trigger. Animations are more flexible for complex multi-step motion.@keyframes and the animation shorthand supported by every modern browser (Chrome, Firefox, Safari, Edge). No vendor prefixes are required for current browser versions.