@keyframes

1. @keyframes

 

@keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다.

 

@keyframes 를 사용하기 위해선 세 가지가 필요합니다.

 

• animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름
• 스테이지 : from - to 로 0~100% 의 구간
• CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일

2. Animation

 

animation 속성은 애니메이션에 이름을 지정하거나 지속시간, 속도 조절 등을 지정할 수 있는 속성을 가지고 있습니다.

아래는 애니메이션 속성의 종류입니다.

 

• animation-name : @keyframes 이름 (예제에서는 fadeOut 을 사용)
• animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
• animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )
• animation-delay : 애니메이션을 시작하기 전 지연시간 설정
• animation-iteration-count : 반복 횟수 지정
• animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)
• animation-fill-mode : 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )

3. Vendor Prefixes

 

크로스 브라우징 이슈를 해결하기 위해 접두사를 붙여줍니다.

 

• 크롬&사파리 : -webkit-
• 파이어폭스 : -moz-
• 오페라 : -o-
• 인터넷 익스플로러 : -ms-