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

是否可以在元素上无限运行动画，但暂停该动画并发生另一个CSS3转换/转换？在悬停时暂停无限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/ - DEMO

来源

2014-03-13 RCNeil

而不是设置animation-play-state的，悬停时只是删除动画：

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

通过动画设置相同的属性和正常的规则似乎发生冲突。

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

来源

2014-03-13 22:29:31

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

回答

相关问题