1

在另一个问题上，我被推荐到这个网站，但我无法让它工作。我不熟练使用 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; }

以下是作者的笔记。“将动画类与任何动画名称一起添加到元素中”是什么意思？我是这样解释的<p class="animated"><p class="shake">This is a test</p></p>

更新：在此页面上，它向我展示了 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);}
}
4

1 回答 1

3

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

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

该类animated设置通用动画参数，动画名称类填充空白并准确描述将发生的动画。

看到它在行动。

于 2013-05-06T21:40:38.747 回答