[css] animation 사용하는 속성 등..

 

1. animation에서 사용하는 속성들

 

@keyframes	애니메이션이 바뀌는 지점을 지정
animation-delay	애니메이션의 시작 시간을 지정
animation-direction	종료한 뒤 처음부터 시작할지 ,역방향으로 진행할지 지정합니다.
animation-duration	실행시간을 지정
animation-interation-count	반복횟수를 지정
animation-name	@keyframes로 설정해 놓은 중간 상태를 지원
animation-timing-function	키프레임의 전환 형태를 지정
animation	animation속성을 한꺼번에 묶어서 지정합니다. 여기서 animation-duration 속성 값은 꼭 지정을 해주어야 합니다.

 

2. animation-direction 속성 값

 

normal	애니메이션을 from에서 to로 , 기본값
reverse	to에서 from 으로
alternate	홀수번째는 normal로, 짝수번째는 reverse로 실행
alternate-reverse	홀수번째는 reverse로, 짝수번째는 normal로 진행

 

3. animation-iteration-count의 속성 값

 

숫자	애니메이션의 반복 횟수 지정
infinite	무한 반복

 

4. animation-timing-function 속성 값

이것은 tansition에서 배운 transition-timing-function과 속성값이 같습니다.

아래표는 속성 값입니다.

 

 

ease	처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝남.기본값
linear	시작부터 끝까지 같은 속도로 진행
ease-in	느리게 시작합니다
ease-out	느리게 끝냅니다.
ease-in-out	느리게 시작하고 느리게 끝냅니다
cubic-bezier(n, n, n, n)	베지에 함수를 정의해서 사용합니다. 이때 n값은 0~1 사이만 사용할 수 있습니다.