Animation

개요. 

요소에게 변화를 주기 위해서 transform과 transition을 사용했다. 

이때 최종적으로 이동되는 위치가 한번 꺽어서 다른 방향으로 이동한다면 transform을 사용해서 구현할 수 없어진다. 

 

이때 사용하는 것이 animtaion이다. 

animation은 닥독으로 사용되는 것이 아닌 tansform이나 width 등 다른 속성과 함께 사용해서 원하는 동작을 

만들어내는 속성이다. 

 

@keyframes

실제로 애니메이션의 동작을 작성하는 속성이다. 이것을 활용해서 원하는 애니메이션을 만들 수 있다. 

 

keyframes는  0% ~ 100% 까지의 타임라인이 존재한다. 

애니메이션의 시작점이 0%이고 끝점이 100%이다. 중간에 원하는 어떤 지점에도 특정 애니메이션을 넣을 수 있다. 

 

이제 앞서 말했던 x축으로 쭉 이동하다가 y축으로 이동하는 애니메이션을 만들어보자 : 

@keyframes move-box {
    0% {
      transform: translate(0, 0);
    }

    50% {
      transform: translate(300px, 0);
    }

    100% {
      transform: translate(300px, 300px);
    }
}

 

0%에서는 별다른 변동이 없으며 50%에서는 x축으로 300px 이동하고 마지막 100%에서 y축으로 300px 이동한다. 

이렇게 선언하면 애니메이션 동작은 완료된 것이다. 

 

animation 

만들어둔 keyframes를 실제 사용하려면 animation 속성을 사용해야 한다. 

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    background: teal;

    animation: move-box 2s;
}

 

사용하는 방법은 transition과 매우 유사한데, 먼저 애니메이션 명칭을 입력하고 실행 시간을 추가하면 끝이다.

만들어진 코드를 실행해보면 제대로 애니메이션이 나타나는 것을 확인할 수 있다. 

애니메이션의 상세 속성도 transform과 같이 여러 개가 존재한다. 

animation-name: move-box;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: 2;
animation-timing-function: ease;
animation-direction: alternate; 
animation-fill-mode: forwards;
animation-play-state: paused;

 

대부분의 속성이 transition과 동일하다고 생각하면 된다. 

animation-name 

사용할 애니메이션의 이름을 넣는 속성이다. 

keyframes로 만든 애니메이션의 이름을 넣어주면 된다. 

animation-duration 

애니메이션의 실행 시간을 나타낸다. 

animation-delay 

애니메이션이 실행되기 전 대기 시간을 나타낸다. 설정한 시간 이후 실행된다. 

animation-iteration-count

애니메이션이 실행되는 횟수를 나타낸다. 무한으로 반복하고 싶다면 infinite를 설정하면 무한으로 반복시킬 수 있다.

animation-timing-function

transition-timing-function 처럼 변화가 진행되는 속도를 설정할 수 있다. 

기본값은 동일하게 ease인데, linear 또는 커스텀을 통해서 진행 속도를 조절할 수 있다. 

animation-direction

기본적으로 애니메이션을 끝나면 다시 0%의 위치로 돌아오게 된다.

하지만 다시 100%에서 0%로 돌아오게 하는 방법이 존재하는데 이것이 animation-direction이다. 

alternate 속성을 사용하면 다시 되돌아오는 애니메이션을 만들 수 있는데,

100% 에서 0%로 진행되는 reverse 속성이나, 100%에서 0%로 다시 100%로 돌아오는 alternate-reverse 속성도 있다. 

animation-fill-mode

애니메이션이 끝나면 0%로 돌아가는데, 100%에 멈춰있게 하는 만들 수 있다. 

forwards 속성을 주게 되면 애니메이션이 끝났을 때 0%로 돌아가는 것이 아닌 100%에 남아있게 된다.

animation-play-state

애니메이션이 실행되는 상태를 나타낸다. paused 속성을 주게 된다면 애니메이션이 바로 멈춘다. 

hover 와 같은 가상 선택자를 함께 사용해서 특정 이벤트에서 애니메이션이 멈추게 할 수 있다.