• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

animation-direction

21.10.20 20:46 작성 조회수 173

0

안녕하세요 강의 잘 보고있습니다. 여러가지 만들어보던중에 궁금한게 생겨서 질문드립니다.

키프레임은 다음처럼 본 강의영상 예제처럼 똑같이 했습니다.

@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%... 이런식으로 동작하는지 궁금합니다....

 

course-thumbnail

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

3-2 CSS 애니메이션과 키프레임에 대한 이해

강의실 바로가기

답변 1

답변을 작성해보세요.

1

깡코딩님의 프로필

깡코딩

지식공유자

2021.10.20

안녕하세요 :)

어렵게 생각하지 말고 간단하게 생각하면 됩니다 :)

arternate 속성은 요소가 정해진 순서로 이동했다가 역방향으로 이동하는 속성입니다.

reverse 속성은 애니메이션이 반대로 진행되는 속성이구요!

여기서 질문자님이 궁금증이 생기셨죠?

만약 반대 순서로 진행했다가 정해진 순서로 애니메이션을 진행하고 싶다면??

 

alternate-reverse 속성을 사용하면 됩니다 :D

간단하죠??

 

그럼 또 다른 궁금증이 생기면 언제든 문의주세요 ^_^

이 글과 비슷한 Q&A