Question

我有一个简单的CSS3动画，我想在悬停时暂停。

这是一个简化版本：

h1 {
    animation-name: test 3000ms infinite alternate;
}
@keyframes test {
    from {
        transform: translate(0,0);
    }
    to {
        transform: translate(100px,0);
    }
}
h1:hover {
    animation: paused;
}

它有效，但暂停意味着跳回0%状态。是否有办法（a）暂停当前状态（b）更优雅地重置，例如运行最后一个循环？

由于

Answer 1

使用 animation-play-state ，如下所示：

h1 {
    animation-name: test;
    animation-duration:3000ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state:running;/*running normally*/
}

h1:hover {
    animation-play-state:paused; /*paused when hover*/
}

<强> DEMO

注意 - Internet Explorer 9 和早期版本不支持animation-play-state属性。

CSS动画：暂停

1 个答案: