A direção Alternada cria um efeito natural de ida e volta — ideal para elementos de interface que chamam atenção?

A direção Alternada cria um efeito natural de ida e volta — ideal para elementos de interface que chamam atenção.

Curvas cubic-bezier personalizadas permitem criar easing único que combina com a identidade da sua marca?

Curvas cubic-bezier personalizadas permitem criar easing único que combina com a identidade da sua marca.

Mantenha a duração da animação abaixo de 300ms para micro-interações e 500-1000ms para transições.

Construir animações CSS de keyframe com pré-visualização ao vivo, controles de tempo e código pronto para usar

Construa animações CSS keyframe com pré-visualização ao vivo, controles de tempo e código pronto para uso — tudo no seu navegador.

1Selecione um tipo de animação: Quicada, Fade In/Out, Slide In/Out, Tremor, Rotação ou Pulso.
2Ajuste a duração e o atraso para controlar a velocidade e o momento de início da animação.
3Defina a contagem de iterações (número de loops) ou escolha Infinito para animações contínuas.
4Escolha a direção (Normal, Inverso, Alternado) e a função de tempo (ease, linear, cubic-bezier).
5Clique em 'Reproduzir novamente' para pré-visualizar a animação e depois copie a saída CSS.

A direção Alternada cria um efeito natural de ida e volta — ideal para elementos de interface que chamam atenção.
Curvas cubic-bezier personalizadas permitem criar easing único que combina com a identidade da sua marca.
Mantenha a duração da animação abaixo de 300ms para micro-interações e 500-1000ms para transições.

Grátis: animações básicas. Starter+: tipos de animação premium.

Equipe OneKitToolsAtualizado 2.21.4