Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de Animação de Chave CSS

CorDesenvolvedor

ANUNCIADO Remover?

ENTRADA

Processo Automático

Animation Preset

Predefinição

Configurações de Animação

Nome

Duration (s)

Easing

cubic-bezier()

Iterações

Infinite

Direção

Fill Mode

Keyframes

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Gerador de Animação de Chave CSS

Create CSS @keyframes animations visually with a live preview. Choose from 10 popular presets like bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash, and wobble — or build your own custom keyframe animation from scratch. Adjust timing, easing, iteration count, direction, and fill mode, then copy the generated CSS code.

Como usar

Select a preset animation or start with a custom animation. Configure the animation settings — name, duration, easing function, iteration count, direction, and fill mode. Edit keyframe stops by setting the percentage, CSS transform value, and opacity for each stop. Add or remove keyframe stops as needed. Watch the live preview update in real time, then copy the generated CSS code.

Características

10 Animation Presets – Bounce, shake, pulse, fade in, slide in, spin, swing, rubber band, flash, and wobble ready to use
Custom Keyframe Editor – Add, remove, and edit keyframe stops with percentage, transform, and opacity controls
Live Animation Preview – See your animation play on a demo element in real time as you make changes
Full Animation Control – Configure duration, easing (including custom cubic-bezier), iterations, direction, and fill mode
Saída de CSS Limpo – Generates both @keyframes rule and animation shorthand property ready to paste into your stylesheet

ANUNCIADO Remover?

 Perguntas frequentes

What are CSS @keyframes?

CSS @keyframes define the stages of an animation sequence. Each keyframe specifies styles at a particular point during the animation timeline, expressed as a percentage from 0% (start) to 100% (end). The browser interpolates property values between keyframes to create smooth transitions.
What is the difference between CSS transitions and CSS animations?

CSS transitions animate a property change between two states (e.g. on hover), triggered by a state change. CSS animations using @keyframes can run automatically, loop, have multiple intermediate steps, and offer more control with properties like animation-direction, iteration-count, and fill-mode.
What does the animation fill-mode property do?

The animation-fill-mode property controls how styles are applied before and after the animation plays. ‘forwards’ keeps the final keyframe styles after the animation ends. ‘backwards’ applies the first keyframe styles during the delay period. ‘both’ applies both behaviors. ‘none’ reverts to the element’s original styles.
What is a cubic-bezier easing function?

A cubic-bezier easing function defines a custom speed curve for an animation using four control points (x1, y1, x2, y2). It determines how fast or slow the animation progresses at different points in time. Common presets like ease, ease-in, and ease-out are named shortcuts for specific cubic-bezier values.