animation-direction / 방향

See the Pen animation-direction by nilgi (@nilgi) on CodePen.

 

.box {
    animation-name: box;
    animation-duration: 2s;
    animation-iteration-count: infinite; / 무한반복
}

.box1 {
    animation-direction: normal; / 기본값. 정방향. 생략가능.
}

.box2 {
    animation-direction: reverse; / 역방향
}

.box3 {
    animation-direction: alternate; / 정방향 >> 역방향
}

.box4 {
    animation-direction: alternate-reverse; / 역방향 >> 정방향
}

@keyframes box {
    0% {left: 0px; top: 0px;}
    20% {left: 60px; top: 0px;}
    50% {left: 60px; top: 60px;}
    75% {left: 0px; top: 60px;}
    100% {left: 0px; top: 0px;}
}