Question

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

它在FIREFOX中执行的每个浏览器（谷歌浏览器，Safari，IE，歌剧）都很棒！

我真的不知道为什么它只能在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; }

css3关键帧悬停动画firefox

1 个答案: