Key-Frame 애니메이션이란?

@keyframes 와 애니메이션

CSS 애니메이션의 중요한 요소는 @keyframes입니다.

@keyframes는 CSS 문법 중 하나로 애니메이션이 만들어 지는 부분입니다.

@keyframes를 타임라인 안의 하나의 스태이지(구간)들 이라고 생각하시면 편합니다.

다음으로 CSS 애니메이션이 작동하도록 @keyframes를 선택자로 묶어주시면 됩니다.

이것은 마지막에 keyframes 선언 안의 모든 코드를 분석하고 각 스테이지에 따라 새로운 스타일로 변형시키게 됩니다.

참조)

Animation 속성

animation 속성은 예전에 @keyframes라고 불리며 CSS 선택자 안에서 존재했었습니다.

animation은 여러개의 속성을 가질 수 있습니다.

animation-name: @keyframes 이름 (예시에서는 tutsFade를 사용함)
animation-duration: 타임프레임 길이. 애니메이션 시작부터 마지막까지 총 지속시간
animation-timing-function: 애니메이션 속도 조절 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier
animation-delay: 애니메이션이 시작하기 전 지연시간
animation-iteration-count: 반복 횟수
animation-direction: 루프 (loop) 방향. 정방향으로 반복, 역방향으로 반복, 번갈아가며 반복 등을 설정
animation-fill-mode: 애니메이션 시작/끝 상태 제어 ( none | forwards | backwards | both )

ex1)

glow 1.2s linear 0.6s forwards, vibe 0.2s ease-in-out 1.8s 3 !important

ex2)

짧게도 가능합니다.

1초동안 지연시간 후 4초의 총 애니메이션 길이를 가지고 loop 방향을 번갈아가면서 일정한 속도로 무한 반복을 하며 깜박거리는 효과를 만듭니다.

Vender Prefixes 추가하기

작업 초안을 만드는 동안 브라우저에 맞는 prefix를 사용하여 브라우저 지원이 가능한 잘되도록 합니다.

기본 prefix를 달아줍니다.

Animation 속성을 벤더 프리픽스와 함께 사용하기

@keyframe에도 달아줍니다.

참조)

KeyFrame 애니매이션 강좌 페이지

번데기 개발자의 메모장