如何持久化 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 元素的背景色设置为红色即可。由于关键帧动画是自动触发的，所以它一开始不会出现红色，而是你想要的白色。

Answer 2

animation-fill-mode: forwards;

很可能是您要查找的内容。资源： CSS Animation property stays after animating

如何持久化 css3 动画变化

How to persist css3 animation change

css

animation

keyframe