@keyframes를 활용한 애니메이션 주기

다음은 좌우 이동 애니메이션 예제다

artist {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: mymove 5s infinite;
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 400px;}
}

 

mymove라는 애니메이션을 5초 사이클의 애니메이션이 무한정 반복되는 코드다.

mymove는 5초 동안 왼쪽 0px에서 오른쪽 400px까지 이동하고, 애니메이션이 끝나면 다시 0px로 순간 이동한 후에 다시 시작한다.

그래서 애니메이션이 끝날 때마다 순간적으로 제자리로 돌아가고, 그걸 무한히 반복한다.

 

만약 이런 순간 이동이 어색하다면, animation-direction 속성을 추가해서 애니메이션이 반대 방향으로 부드럽게 돌아가게 할 수도 있다. 예를 들어 infinite가 아닌 alternate로 대체하는거다..

아래는 alternate를 쓰고 다른 애니메이션을 적용한 코드다.

 

artist {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: myfirst 5s 2 alternate;
}

@keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: green; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}

 

이거는 from과 to가 아닌 중간 상태를 나타내는 인자로 n%가 쓰였다.

0%~25% 상태에는 배경이 빨강, 25%~50% 상태에는 배경이 노랑인데 왼쪽으로 200px 이동..하는 식으로 애니메이션이 이루어진다.

참고로 50%에도 left가 200px인데 이로 인해 총 400px 이동한 것 아닌가? 하는 오해가 생길 수 있다.

그게 아니라 그냥 200px이면 200px 위치 그대로라는 의미다.

만약 199px이면 오른쪽으로 1px 이동하게 될 것이다.

그리고 animation-direction이 2 alternate이니 2번 반복하고 애니메이션이 종료된다.