css3关键帧悬停动画firefox

Posted 2023-03-06

【中文标题】css3关键帧悬停动画firefox

【英文标题】：css3 keyframes hover animation firefox

【发布时间】：2014-01-23 21:25:40

【问题描述】：

我创建了一些关键帧动画，以在纯 css3 中为鼠标悬停时的 div 设置动画。

它在 FIREFOX 中执行的所有浏览器（google chrome、safari、IE、opera）上都运行良好！

我真的不知道为什么它不能只在 Firefox 中工作。动画在鼠标悬停时不起作用，但在加载时起作用....

这里是关键帧的 css 示例：

@-webkit-keyframes swing 
    20%, 40%, 60%, 80%, 100%  -webkit-transform-origin: top center; 
    20%  -webkit-transform: rotate(15deg);    
    40%  -webkit-transform: rotate(-10deg); 
    60%  -webkit-transform: rotate(5deg);     
    80%  -webkit-transform: rotate(-5deg);    
    100%  -webkit-transform: rotate(0deg); 

@-moz-keyframes swing 
    20%  -moz-transform: rotate(15deg);   
    40%  -moz-transform: rotate(-10deg); 
    60%  -moz-transform: rotate(5deg);    
    80%  -moz-transform: rotate(-5deg);   
    100%  -moz-transform: rotate(0deg); 

@-o-keyframes swing 
    20%  -o-transform: rotate(15deg);     
    40%  -o-transform: rotate(-10deg); 
    60%  -o-transform: rotate(5deg);  
    80%  -o-transform: rotate(-5deg);     
    100%  -o-transform: rotate(0deg); 

@keyframes swing 
    20%  transform: rotate(15deg);    
    40%  transform: rotate(-10deg); 
    60%  transform: rotate(5deg);     
    80%  transform: rotate(-5deg);    
    100%  transform: rotate(0deg); 

.col:hover .swing 
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation: swing 1s linear;
    -moz-animation: swing 1s linear;
    -o-animation: swing 1s linear;
    animation: swing 1s linear;

.swing 
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation: swing 1s linear 1s;
    -moz-animation: swing 1s linear 1s;
    -o-animation: swing 1s linear 1s;
    animation: swing 1s linear 1s;


.col,
.th-icon 
    position: relative;
    margin: 40px 0 0 100px;
    width: 200px;
    height: 200px;

i.swing 
    display: block;
    width: 200px;
    height: 200px;
    background: grey;

还有小提琴：http://jsfiddle.net/ktxDp/1/

【参考方案1】：

可能是 Firefox 不允许两次相同的动画。

当我只调用一次动画时它就起作用了。 Working Demo

.col:hover .swing 
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation: swing 1s linear;
    -moz-animation: swing 1s linear;
    -o-animation: swing 1s linear;
    animation: swing 1s linear;

【讨论】：

感谢您的回答。我知道该怎么做，但是如果鼠标熄灭，我会延迟以使整个动画悬停。 Firefox 似乎无法正确处理动画延迟。这又是一个 firefox 错误...我认为唯一的解决方案是使用 jquery...