Question

我做了一个缓慢的无限CSS3动画。它从top:0;到top:40px;的动画效果。错误是当animate结束时，它跳转到起点。我认为它应该与ease或ease-in一起跳，但这并没有发生。我尝试了很多来解决这个问题，但我失败了。

我需要返回转换才能产生ease-in效果。

我的代码：

＆＃13;

span {
  margin-left: 200px;
}
/** Down Slow Animation **/

@-webkit-keyframes downSlow {
  from { top: 0px; }
  to { top: 40px; }
}
@-moz-keyframes downSlow {
  from { top: 0px; }
  to { top: 40px; }
}
@keyframes downSlow {
  from { top: 0px; }
  to { top: 40px; }
}
.down-slow {
  position: relative;
  -webkit-animation: downSlow 1.5s infinite;
  -moz-animation: downSlow 1.5s infinite;
  animation: downSlow 1.5s infinite;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>

＆＃13;

Answer 1

这只是一种替代解决方案

只需在alternate的末尾添加animation。

＆＃13;

span {
  margin-left: 200px;
}
/** Down Slow Animation **/

@-webkit-keyframes downSlow {
  from { top: 0px; }
  to { top: 40px; }
}
@-moz-keyframes downSlow {
  from { top: 0px; }
  to { top: 40px; }
}
@keyframes downSlow {
  from { top: 0px; }
  to { top: 40px; }
}
.down-slow {
  position: relative;
  -webkit-animation: downSlow 1.5s infinite alternate;
  -moz-animation: downSlow 1.5s infinite alternate;
  animation: downSlow 1.5s infinite alternate;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>

＆＃13;

相同的代码可以缩减为

＆＃13;

span {
  margin-left: 200px;
  top: 0px;
}

@-webkit-keyframes downSlow {
  to { top: 40px; }
}
@-moz-keyframes downSlow {
  to { top: 40px; }
}
@keyframes downSlow {
  to { top: 40px; }
}
.down-slow {
  position: relative;
  
  -webkit-animation: downSlow 1.5s infinite alternate;
  -moz-animation: downSlow 1.5s infinite alternate;
  animation: downSlow 1.5s infinite alternate;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>

＆＃13;

更好的方法是使用translate，这样你的元素就不会干扰其他DOM元素

＆＃13;

span {
  margin-left: 200px;
}

@-webkit-keyframes downSlow {
  to { transform: translateY(40px) }
}
@-moz-keyframes downSlow {
  to { transform: translateY(40px) }
}
@keyframes downSlow {
  to { transform: translateY(40px) }
}
.down-slow {
  position: relative;

  -webkit-animation: downSlow 1.5s infinite alternate;
  -moz-animation: downSlow 1.5s infinite alternate;
  animation: downSlow 1.5s infinite alternate;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>

＆＃13;

但你可以再次使用prefixfree cdn here

来减少这种情况

＆＃13;

span {
  margin-left: 200px;
}

@keyframes downSlow {
  to { transform: translateY(40px) }
}
.down-slow {
  position: relative;
  animation: downSlow 1.5s infinite alternate;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>

＆＃13;

结束时设定速度/ 2

＆＃13;

span {
  margin-left: 200px;
}

@keyframes downSlow {
  to { transform: translateY(40px) }
}
.down-slow {
  position: relative;
  animation: downSlow .7s infinite alternate forwards;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>

＆＃13;

参考：animation-fill-mode

关键帧动画回到初始状态

1 个答案: