Html Can'；如果不能让网站生成的CSS正常工作，那么该规则适用于哪些条件？

在另一个问题上，有人向我推荐生成CSS，但我无法让它工作。我不擅长CSS

这是它生成的CSS代码，加上我添加了一些用于测试的代码。背景是黄色的，我添加它是为了确保CSS文件加载正确，但我无法使文本抖动。有一件事我搞不清楚，在什么情况下文本会抖动，我应该点击什么吗

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes shake {     0%, 100% {-webkit-transform: translateX(0);}    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}     20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} }

@-moz-keyframes shake {     0%, 100% {-moz-transform: translateX(0);}   10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} }

@-o-keyframes shake {   0%, 100% {-o-transform: translateX(0);}     10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}  20%, 40%, 60%, 80% {-o-transform: translateX(10px);} }

@keyframes shake {  0%, 100% {transform: translateX(0);}    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}     20%, 40%, 60%, 80% {transform: translateX(10px);} }

.shake {    -webkit-animation-name: shake;  -moz-animation-name: shake;     -o-animation-name: shake;   animation-name: shake; }

body { background-color:yellow; }

这是作者的笔记。“将动画类与任何动画名称一起添加到元素”是什么意思？这就是我对它的解释这是一个测试

更新：上面显示了一个CSS规则的示例，文本确实会抖动，所以这不是浏览器兼容性问题。我试着像这样建议我删除

-moz

，但仍然不起作用

.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;}
}

@keyframes flash {
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;}
}

.flash {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
}
@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}

@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

@-o-keyframes shake {
    0%, 100% {-o-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}

您需要将两个类添加到同一个元素中，如中所示：

<p class="animated shake">Do the harlem shake!</p>

做哈林区的摇吧

animated

类设置常规动画参数，animation name类填充空白并准确描述将发生的动画

---

不想成为坏消息的暴露者，但您的示例在我的FireFox或Internet Explorer中不起作用。还有其他人让它工作吗？@Celeritas:我不确定IE为什么不工作（现在无法深入了解兼容性表），但对于FF来说，很可能是因为它“太新了”。从

.animated

中删除

-moz-

内容，它会的。我在不同的计算机上尝试了几种浏览器，都没有显示你的JSFIDLE在移动，它会移动吗？@Celeritas:是的，最新的Chrome和FF（在我上面提到的调整之后）都可以工作。我让它在FF中工作！在JSFIDLE中，我不知道我必须单击run。在IE8中，它挂在“初始化真棒”屏幕上。很抱歉没有正确使用该程序，尽管有些可疑的事情似乎正在发生。