Question

是否可以在元素上无限地运行动画，但暂停该动画并进行另一次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，然后在transform状态下运行:hover效果。一旦:hover状态结束，我希望它返回原始的无限动画。

http://jsfiddle.net/3R92G/ - DEMO

Answer 1

不要设置animation-play-state，只需在悬停期间删除动画：

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

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

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

在悬停时暂停无限的CSS3动画并使用转换

1 个答案: