如何坚持css3动画改变

Question

目标是在动画结束时将背景保持为红色。

使用chrome http://codepen.io/JulianNorton/pen/RNqLZM

.animation {
    -webkit-animation:test-animation 2s 2;
    // Animation stops after a few seconds, state doesn't stay red.
}


@-webkit-keyframes test-animation {
    0% {

        background-color:#fff
    }

    100% {
        background-color:red
    }
}

@keyframes test-animation {
    0% {
        background-color:#fff
    }

    100% {
        background-color:red
    }
}

Answer 1

animation-fill-mode: forwards;  

很可能是你在找什么。 资源： CSS Animation property stays after animating

Answer 2

只需将.animation元素的背景颜色设置为红色即可。由于关键帧动画是自动触发的，因此它最初不会显示为红色，而是会显示您想要的白色。