CSS / 애니메이션 / animation / animation-direction - 진행 방향 정하는 속성
animation-direction
- animation-direction은 애니메이션의 진행 방향 정하는 속성입니다.
- 애니메이션 관련 속성은 IE 버전 10 이상에서 사용할 수 있습니다.
문법
|
1 |
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit |
- normal : 기본값입니다. 정해진 순서로 진행합니다.
- reverse : 반대 순서로 진행합니다.
- alternate : 정해진 순서로 진행했다가 반대 순서로 진행합니다.
- alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
- 박스가 커지는 애니메이션입니다.
- animation-direction의 값을 정하지 않거나 normal로 정하면, @keyframes에서 정한 순서로 애니메이션이 진행됩니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> @keyframes big { from { width: 0px; height: 0px; } to { width: 150px; height: 150px; } } div#jb { margin: 30px auto; background-color: orange; animation-name: big; animation-duration: 2s; animation-timing-function: linear; animation-delay: 0s; animation-direction: normal; } </style> </head> <body> <div id="jb"></div> </body> </html> |
- 값을 reverse로 하면 애니메이션이 반대 방향으로 진행됩니다.
|
1 |
animation-direction: reverse; |
- 값을 alternative로 하면 정방향 진행한 후 역방향으로 진행합니다. 애니메이션 횟수를 늘려야 어떻게 되는 건지 알기 좋습니다.
|
1 2 |
animation-iteration-count: 2; animation-direction: alternate; |
- 값을 alternative-reverse로 하면 역방향 진행한 후 정방향으로 진행합니다.
|
1 2 |
animation-iteration-count: 2; animation-direction: alternate-reverse; |