我目前正在尝试为向下箭头创建弹跳动画。但是，无论我如何更改值，我都可以使动画正常工作，但无法识别关键帧。箭头是 Font Awesome fa-chevron-down。我的网站是用 wordpress 构建的。
我的 CSS 代码是:
.view-more > i{
font-size: 39px;
position: absolute;
bottom: 2%;
animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
}
@keyframes bounce{
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-3px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-3px);
}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
}
60% {
-moz-transform: translateY(-3px);
}
}
我是不是做错了什么，因为我在谷歌上搜索过，我发现这应该有效。
我也尝试过 jsfiddle 并且关键帧正在运行。所以我真的很困惑。 https://jsfiddle.net/yewtree/qh3v7fdk/
任何帮助将不胜感激。感谢您花时间阅读我的问题。
最佳答案
您的代码对我有用。但是，我更改了 animation 属性的顺序以首先包含供应商前缀(这是首选):
.view-more > i {
font-size: 39px;
position: absolute;
bottom: 2%;
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@keyframes bounce{
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-3px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-10px);
}
60% {
-webkit-transform: translateY(-3px);
}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
}
40% {
-moz-transform: translateY(-10px);
}
60% {
-moz-transform: translateY(-3px);
}
}<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="view-more">
<i class="fa fa-chevron-down"></i>
</div>
</body>
</html>关于wordpress - CSS3 反弹关键帧不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31540747/