animation @keyframes %

See the Pen animation @keyframes % by nilgi (@nilgi) on CodePen.

 

.box {
    animation-name: boxc;
    animation-duration: 8s;
}

@keyframes boxc {
    0% {background: tomato;} / 키프레임에 %를 추가해 변경 시기를 지정할 수 있다.
    25% {background: gold;}
    50% {background: #1E90FF;}
    100% {background: #9400d3;} / 총 8초 중 각각 25%씩 이미로 2초
}