我目前正在尝试为向下箭头创建一个反弹动画。但是我可以让动画工作,但无论我如何更改值,关键帧都无法被识别。箭头是一个字体 - 令人敬畏的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);
}
}
我做错了,因为我用Google搜索了,而且我发现这应该有效。
我也尝试过jsfiddle,关键帧正在运行。所以我真的很困惑。 https://jsfiddle.net/yewtree/qh3v7fdk/
任何帮助都会受到赞赏。感谢您抽出宝贵时间阅读我的问题。
答案 0 :(得分:1)
您的代码适合我。但是,我已将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>
答案 1 :(得分:1)
我无法看到您的问题,请参阅下面的代码段。我已经对它进行了一些修改以使所有值相互跟随(并且通常使它更易读),并且还增加了更少的buff值,因此我们可以看到差异。您的动画正在按预期工作。
@keyframes bounce{
0% { transform: translateY(0); }
20% { transform: translateY(0); }
40% { transform: translateY(-50%); }
50% { transform: translateY(0); }
60% { transform: translateY(-20%); }
80% { transform: translateY(0); }
100% { transform: translateY(0); }
}
@-webkit-keyframes bounce {
0% { -webkit-transform: translateY(0); }
20% { -webkit-transform: translateY(0); }
40% { -webkit-transform: translateY(-50%); }
50% { -webkit-transform: translateY(0); }
60% { -webkit-transform: translateY(-20%); }
80% { -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes bounce {
0% { -moz-transform: translateY(0); }
20% { -moz-transform: translateY(0); }
40% { -moz-transform: translateY(-50%); }
50% { -moz-transform: translateY(0); }
60% { -moz-transform: translateY(-20%); }
80% { -moz-transform: translateY(0); }
100% { -moz-transform: translateY(0); }
}
div {
background:red;
position: absolute;
top: 20px;
left: 20px;
width: 20px;
height: 20px;
-webkit-animation: 1000ms bounce infinite;
animation: 1000ms bounce infinite;
}
<div></div>