css3关键帧悬停动画firefox

Question

我创建了一些关键帧动画，以在纯 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/

Answer 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;
}