Question

如何让CSS3动画播放到最后然后停止播放。我不希望它返回被转换回初始状态的元素。

现在我正在使用一些javascript在动画的持续时间之后为元素添加一个类，并在动画中使用与100％相同的属性。

Answer 1

这可以通过“动画填充模式”定义为“转发”，至少在Webkit中是这样。我用这样的代码得到了这个结果：

@-webkit-keyframes test {
  100% { background-color: #0000ff; }
} 

a { background-color: #ff0000; }

a:hover { -webkit-animation: test 1s 1 ease forwards }

请注意，在0％关键帧和最终颜色中指定起始颜色：hover不是必需的。

当然，此代码是特定于Webkit的。我没有在其他浏览器中尝试过其他供应商前缀或一般的“动画”属性。

Answer 2

将您的结束值放在主css类中，并将动画关键帧中的起始值设置为0％：

@keyframes test {
  0% {
    background-color: #ff0000; /* start value */
  }
  100% {
    background-color: #0000ff;
  } 
}

a {
  background-color: #ff0000; /* normal state */
}

a:hover {
  animation-name: test;
  animation-duration: 1s;
  background-color: #ff0000; /* final state, after animation is finished */
}

Answer 3

如果这个问题仍然存在，我认为这不可能使用CSS3动画，因为它们是currently specified：

动画应用动画之前，动画延迟到期之前以及动画结束之后，动画不会影响计算值。

但是，您应该能够将CSS3过渡用于基本效果。有一个slide in the html5rocks.com presentation显示了如何执行此操作。这是相关的[释义]摘录：

#box.left { margin-left: 0; }
#box.right { margin-left: 1000px; }
#box { -webkit-transition: margin-left 1s ease-in-out; }

// Run this to animate to the left
document.getElementById('box').className = 'left';

// Run this to animate to the right
document.getElementById('box').className = 'right';

Answer 4

使用CSS3动画，您可以将动画迭代次数设置为1,2或无限http://dev.w3.org/csswg/css3-animations/#animation-iteration-count

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div
{
width:100px;
height:100px;
background:black;
position:relative;
animation:mymove 8s 1;
-moz-animation:mymove 8s 1; /* Firefox */
-webkit-animation:mymove 8s 1; /*Safari and Chrome*/
}

@keyframes mymove
{
0%   {top:0px; left:0px; background:orange;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:black;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px; left:0px; background:orange;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:black;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:orange;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:black;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>

<div></div>

</body>
</html>

这里还有一个很好的带有猫的CSS3动画示例：http://www.jaider.net/405-neko-the-cat-html5-css3-animation/

Answer 5

动画填充模式：转发 animation-fill-mode CSS属性指定CSS动画在执行之前和之后应如何将样式应用于目标

CSS3动画问题

5 个答案: