[CSS] @keyframes / animation 속성 / 애니메이션 구현

1. keyframes

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

IE는 버전 10 이상에서 사용할 수 있습니다.

크롬, 사파리는  -webkit- 만 붙이면 거의 모든 버전 가능합니다.

 

문법

@keyframes name{

   0%{ }

   100%{ }

}

name - keyframes가 적용될 이름을 정합니다.

0% - 시작할 때 적용될 구간

100% - 끝날 때 적용될 구간

 

예제

@keyframes fadeIn{

   0%{ 

     opacity: 0;

   }

   100%{ 

    opacity: 1;

   }

}

 

2. Animation

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

 

animation 축약형

animation: animation-name animation-duration animation-delay animation-iteration-count animation-timing-function animation-direction fill-mode play-state;

* 이름 > 실행속도 > 지연시간 > 반복횟수 > 애니메이션 속도 조절/그래프 >  반복방향설정 > 끝난후위치 > 실행or정지

 

animation: fadeIn 4s 1s infinite linear alternate;

 

animation 속성 종류

1. animation-name : @keyframes 이름 
2. animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
3. animation-delay : 애니메이션을 시작하기 전 지연시간 설정
4. animation-iteration-count : 반복 횟수 지정
5. animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )
6. animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)
7. animation-fill-mode : 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )
8. animation-play-state : 애니메이션 실행 중에 중지되었을 때 계속 진행하거나 멈추게 할 것인지를 지정