CSS 애니메이션 생성기 사전 설정된 효과와 사용자 지정 타이밍을 갖춘 CSS 키프레임 애니메이션を作成합니다.

CSS 애니메이션은 animation 속성과 @keyframes 규칙을 사용합니다. animation 속성은 다음을 결합합니다: animation-name (@keyframes 규칙 참조), animation-duration, animation-timing-function (ease, linear, ease-in, ease-out, ease-in-out 또는 사용자 지정 cubic-bezier), animation-delay, animation-iteration-count (숫자 또는 무한대), animation-direction (normal, reverse, alternate, alternate-reverse), animation-fill-mode (none, forwards, backwards, both) 및 animation-play-state (running, paused). @keyframes 규칙은 百分比(0%에서 100%) 또는 from/to 키워드를 사용하여 애니메이션 단계를 정의합니다. 성능을 위해 가능한 경우 transform 및 opacity 속성만 애니메이션으로 처리하는 것이 좋습니다. 이러한 속성들은 GPU 가속화될 수 있습니다. 다른 속성들(width, height, margin, padding 등)은 레이아웃 재계산을 트리거합니다. will-change 속성을 사용하여 브라우저에 곧 일어날 애니메이션에 대한 힌트를 제공할 수 있습니다.