Реклама мешает? Идти Без рекламы Сегодня 

Генератор анимации CSS

ЦветРазработчик

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Animation Preset

Предустановленный

Настройки анимации

Имя

Duration (s)

Easing

cubic-bezier()

Итерации

Infinite

Направление

Fill Mode

Keyframes

ВЫХОД

Клиентская сторона

Реклама · УДАЛИТЬ?

Гид

Генератор анимации 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.

Как использовать

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.

Возможности

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
Чистый вывод CSS – Generates both @keyframes rule and animation shorthand property ready to paste into your stylesheet

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

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.