完成动画后，如何让我的 css3 动画保持在动画位置？ [复制]答案

【问题标题】：How can I let my css3 animation to stay at its animated position when it finishes animating? [duplicate]完成动画后，如何让我的 css3 动画保持在动画位置？ [复制]
【发布时间】：2012-12-21 06:53:02
【问题描述】：

可能重复：
Webkit CSS Animation issue - persisting the end state of the animation?

我想在动画 div 完成运行后保持其位置。现在我在鼠标悬停时为 div 设置动画，但即使我仍然悬停在它上面，div 也会返回到它的位置。

有没有办法让它只有在我鼠标移开时才能恢复？

http://jsfiddle.net/neoswf/X5a64/

div{
    width:100px;height:100px;margin:1em;background:red
}
div:hover {
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-transform: translateZ(0);
}
@-webkit-keyframes rotateThis {
  from { -webkit-transform:scale(1) rotate(0deg); }
  to { -webkit-transform:scale(1.1) rotate(100deg); }
}

【问题讨论】：

标签： css css-animations

【解决方案1】：

你在寻找

-webkit-animation-fill-mode: forwards;

DEMO

【讨论】：

【解决方案2】：

使用animation-fill-mode: forwards 保持结束状态：

-webkit-animation-fill-mode: forwards;

http://jsfiddle.net/stjHZ/

【讨论】：