CSS 애니메이션 예제

div {

    width: 100px;

    height: 100px;

    position: relative;

    background-color: antiquewhite;

    /* 아래 정의한 keyframes를 가져온다. 여럿을 지정할 수도 있다. */

    animation-name: move;

    animation-duration: 3s;

    animation-iteration-count: infinite; /* 반복 횟수 */

}

 

@keyframes move {

    0% { left: 0; }

    50% { left: 300px; }

    100% { left: 0; }

}

 

 

 

/* 아래와 같이 할 수도 있다. */

@keyframes move {

    from { left: 0; } /* 0에서 300px로 */

    to { left: 300px; }

}

 

animation-direction: alternate; /* 홀수번째는 정방향 짝수번째는 역방향 */

 

참고 : https://poiemaweb.com/css3-animation