CSS3 动画在 Mozilla 中不起作用

Question

我已经在 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); }
}

Answer 1

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

我认为你的问题是跨度的显示是内联的一旦我将显示更改为内联 block ，它就可以正常工作

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