animation @keyframe %%

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

다시 보기 : Rerun ▲

 

animation-name: boxc; // 애니메이션 이름 지정
animation-duration: 8s; // 애니메이션 길이 8초

@keyframes boxc{ // 키프레임 이름
    0% {background: tomato;} // 위 지정 시간의 0% 지점에 배경 토마토색
    25% {background: gold;} // 지정 시간의 25% 지점에 배경 금색
    50% {background: #1E90FF;} // 지정 시간의 50% 지점에 배경 파랑색
    100% {background: #9400d3;} // 지정 시간의 100% 지점에 배경 보라색
}

 

이렇게 시작 점을 %로 지정할 수 있다.