-
나두 자주 안써 해깔리는 명령어 속성....
그 중에 animation 어느 분이 잘 정리해서 일단 이렇게 퍼와 봐요...!!
CSS 애니메이션을 만드려면 animation 속성과 이 속성의 하위 속성을 지정합니다. 애니메이션의 총 시간과 반복 여부등을 지정할 수 있습니다.
이 속성은 애니메이션의 중간상태를 기술하지 않는다는걸 명심하세요.
애니메이션의 중간 상태는 아래에서 다룰 @keyframes 규칙을 이용하여 기술합니다.
animation 속성의 하위 속성은 다음과 같습니다.
- 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
- 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
- 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
- 애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.
- 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다.
- 애니메이션을 멈추거나 다시 시작할 수 있습니다.
- 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
- 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.
출처: https://webclub.tistory.com/362 [Web Club] -