Question

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

任何帮助都会受到赞赏。感谢您抽出宝贵时间阅读我的问题。

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

Answer 2

我无法看到您的问题，请参阅下面的代码段。我已经对它进行了一些修改以使所有值相互跟随（并且通常使它更易读），并且还增加了更少的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>

CSS3退回关键帧不起作用

2 个答案: