CSS3 动画在 Mozilla 中不起作用答案

【问题标题】：CSS3 Animation not working in MozillaCSS3 动画在 Mozilla 中不起作用
【发布时间】：2015-12-08 15:18:50
【问题描述】：

我已经在 stackoverflow 中阅读了相同问题的其他答案，但我无法用它们解决。

我的代码在 mozilla 中不起作用，谁能帮帮我？

除此之外，谁能告诉我使用@keyframes 的正确方法。我的意思是，使用@-webkit-keyframes、@-moz-keyframes 和@keyframes 是否正确，或者只使用一个就可以了？

谢谢

header .resaltar {
    color: #F3D85E;
    font-weight: bold;
}
header .resaltar:hover {
    -webkit-animation: shake 0.8s linear infinite;
    -moz-animation: shake 0.8s linear infinite;
    -ms-animation: shake 0.8s linear infinite;
    animation: shake 0.8s linear infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
/** Chrome, Safari, Opera **/
@-webkit-keyframes shake {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

 @-moz-keyframes shake {
    0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
    10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
    40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
    50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
    100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shake {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

【问题讨论】：

在 Firefox 34.0.5 上为我工作。我的猜测是您的 header .resaltar 选择器中有错误。如果没有看到您的 html，就无法 100% 确定。
你好 TreeTree。整个 html 很大，但是这个确切的效果是 happen.
第一组 css 属性是否有效，如文本是粗体和黄色？
请做一个jsfiddle，添加你的html代码。

标签： css animation css-animations keyframe

【解决方案1】：

您遇到的问题是 span 元素的动画。我注意到如果你将此动画应用于父元素（标题）它工作正常。

我认为你的问题是跨度的显示是内联的一旦我将显示更改为内联块，它对我来说效果很好

header .resaltar {
    color: #F3D85E;
    font-weight: bold;
    display: inline-block;
}

【讨论】：

您好 MrByte11，将 inline-block 应用于 span 使其在 Mozilla 上工作，谢谢！但我不明白它为什么会发生……为什么它现在起作用了？
这对我来说也没有多大意义......我在尝试不同元素（div而不是跨度）上的动画后发现了这一点。在比较它们之后，我注意到这是一个显示问题。
我在某处读到内联元素不是“可转换元素”，因此您不能对其应用动画，但这没有意义，因为它在 Chrome 上运行良好（但在 Safari 上不行或Mozilla）