在悬停时暂停无限 CSS3 动画并使用变换答案

【问题标题】：Pause an infinite CSS3 animation on hover and use transform在悬停时暂停无限 CSS3 动画并使用变换
【发布时间】：2014-04-18 23:14:18
【问题描述】：

是否可以在一个元素上无限运行动画，但暂停该动画并发生另一个 CSS3 过渡/变换？

<div class="shake"></div>

例如，我有一个动画-

@-keyframes undulate {
  0%        {  transform: translate(0,0); }
  5%        {  transform: translate(0px,-10px); }
  10%   {  transform: translate(0,0);}
  15%       {  transform: translate(0px,-10px); }
  20%   {  transform: translate(0,0);}
  100%  {  transform: translate(0,0);}
}

我正在运行它的 div：

.shake {
   display:block; position:absolute;
   z-index:1000; 
   bottom:100px; left:50%;
   margin-left:-40px;
   width:80px; height:82px;
   background: #336699;
   cursor:pointer;

   -webkit-animation:undulate 3s linear 0s infinite;
   animation:undulate 3s linear 0s infinite;
}

.shake:hover {
   -webkit-animation-play-state:paused;
   animation-play-state:paused; 
   transform: translate(0px,3px);
   -ms-transform:translate(0px,3px);
   -webkit-transform:translate(0px,3px);    
}

所以，我试图完成的是暂停动画undulate，然后在:hover 状态上运行transform 效果。一旦:hover状态结束，我希望它回到原来的无限动画。

http://jsfiddle.net/3R92G/ - 演示

【问题讨论】：

标签： css animation

【解决方案1】：

不用设置animation-play-state，只需在悬停期间移除动画即可：

.shake:hover {
    -webkit-animation: none;
    animation: none;    
}

通过动画和普通规则设置相同的属性似乎有冲突。

http://jsfiddle.net/3R92G/2/

【讨论】：