animation-fill-mode 키프레임 적용

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

 

.box {
        position: relative;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: gold; / 기본 금색
    }

.fm1 {
    animation-name: fm1;
    animation-duration: 3s;
}
@keyframes fm1 {
    from {left: 0px;}
    to {left: 100px; background: tomato;}
}

.fm2 {
    animation-name: fm2;
    animation-duration: 3s;
    animation-fill-mode: forwards; / 마지막 키프레임을 유지하고 마침
}
@keyframes fm2 {
    from {left: 0px;}
    to {left: 100px; background: tomato;}
}

.fm3 {
    animation-name: fm3;
    animation-duration: 6s;
    animation-delay: 2s;
    animation-fill-mode: backwards; / 지연시간동안 첫번째 키프레임 유지
}
@keyframes fm3 {
    from {left: 0px; background: #ff1493;}
    to {left: 100px;}
}

.fm4 {
    animation-name: fm4;
    animation-duration: 6s;
    animation-delay: 2s;
    animation-fill-mode: both; / 처음과 끝에 첫 키프레임과 마지막 키프레임 값을 적용하여 유지
}
@keyframes fm4 {
    from {left: 0px; background: #9400d3;}
    to {left: 100px; background: #66CC99;}

}