我目前正在尝试为向下箭头创建反弹动画。但是,无论我如何更改值,我都可以使动画正常工作,但关键帧未被识别。箭头是一个字体很棒的fa-chevron-down。我的网站正在用wordpress构建。CSS3反弹关键帧不起作用
我的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,20,40,50,60,80,100”而不是“0,20,50,80,100,40,60”) – somethinghere