Skip to content

색상 및 디자인

CSS 애니메이션 생성기

Build keyframes visually, copy ready-to-paste CSS.

Runs in your browser

편집자 노트

Understanding · Keyframes, timing, and what runs on the GPU.

이 심층 챕터는 현재 영어로만 제공됩니다. 위의 변환 도구는 귀하의 언어로 작동하지만, 긴 설명 글은 아직 번역되지 않았습니다.

자주 묻는 질문

Quick answers.

Does the generator use external libraries?

No. It outputs pure CSS keyframes and `animation` properties that work natively in all modern browsers without any dependencies.

What is the difference between ease-in and ease-out?

The `ease-in` function starts the animation slowly and speeds up at the end, while `ease-out` starts quickly and decelerates at the end.

Can I animate any CSS property?

The tool focuses on the most common animatable properties like `transform`, `opacity`, and `background-color`. These properties are generally more performant as they avoid triggering browser layout recalculations.

How do I make an animation loop forever?

Set the `animation-iteration-count` property to `infinite`. This is a standard option in the duration and timing configuration panel.

사람들이 다음도 검색합니다.

관련 도구

More in this room.

모두 보기 색상 및 디자인