animation-iteration-count 반복

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

 

.box1 {
    animation-name: boxcount1;
    animation-duration: 8s;
    animation-iteration-count: 3; / 반복 3회
}

@keyframes boxcount1 {
    0% {left: 0px; top: 0px;}
    20% {left: 90px; top: 20px;}
    50% {left: 0px; top: 40px;}
    75% {left: 90px; top: 60px;}
    100% {left: 0px; top: 80px;}
}

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

@keyframes boxcount2 {
    0% {left: 0px; top: 0px;}
    20% {left: 90px; top: 20px;}
    50% {left: 0px; top: 40px;}
    75% {left: 90px; top: 60px;}
    100% {left: 0px; top: 80px;}
}