animation-direction

Question

안녕하세요 강의 잘 보고있습니다. 여러가지 만들어보던중에 궁금한게 생겨서 질문드립니다. 키프레임은 다음처럼 본 강의영상 예제처럼 똑같이 했습니다. @keyframes useAni2 { 0%{ transform : translate ( -200px , 0px ); } 50%{ transform : translate ( 200px , 0px ); } 100%{ transform : translate ( 600px , 200px ); } } 그다음 h2요소에 대충 그림그려서 움직이게끔 해봤는데요, h2 { position : absolute ; left : 30% ; top : 30% ; transform : translate ( -50% , -50% ); width : 100px ; height : 100px ; border : 2px solid red ; -webkit-animation-name : useAni2; -webkit-animation-duration : 4s ; -webkit-animation-delay : 0s ; -webkit-animation-direction : alternate ; -webkit-animation-iteration-count : 2 ; -webkit-animation-timing-function : ease ; -webkit-animation-fill-mode : both ; } infinite로 무한히 실행시켜줬을 때 animation-direction:alternate;로 지정해주면 요소가 왔다갔다 반복하는데 animation-direction:reverse;로 해주면 거꾸로 실행되긴하는데 왔다갔다 하지않고 뚝 끊겼다가 다시 시작하고 이런방식으로 작동하네요 fill-mode:both;의 유무와 관계없이 이런 현상이 일어나는데 어떤 차이가 있는건가요?? 구체적으로 왜 alternate로 해주면 0%->50%->100%->50%->0%->50%->... 이렇게 되고 reverse는 100%->50%->0% 끝났다가 다시 100%->50%... 이런식으로 동작하는지 궁금합니다....

깡코딩 · Answer

안녕하세요 :) 어렵게 생각하지 말고 간단하게 생각하면 됩니다 :) arternate 속성은 요소가 정해진 순서로 이동했다가 역방향 으로 이동하는 속성입니다. reverse 속성은 애니메이션이 반대로 진행되는 속성 이구요! 여기서 질문자님이 궁금증이 생기셨죠? 만약 반대 순서로 진행했다가 정해진 순서 로 애니메이션을 진행하고 싶다면?? alternate-reverse 속성을 사용하면 됩니다 :D 간단하죠?? 그럼 또 다른 궁금증이 생기면 언제든 문의주세요 ^_^