広告が嫌いですか? 行く広告なし今日 

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.