CSS3反弹关键帧不起作用

问题描述：

我目前正在尝试为向下箭头创建反弹动画。但是，无论我如何更改值，我都可以使动画正常工作，但关键帧未被识别。箭头是一个字体很棒的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

答

您的代码适用于我。不过，我已经改变了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>

答

我看不出你有什么问题，请参见下面的代码片段。我已经修改了一下，使所有的值都相互依赖（并且通常使它更清晰），并且还增加了一些微不足道的值，因此我们可以看到差异。您的动画按预期工作。

@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>

CSS3反弹关键帧不起作用

相关推荐