目录

animation-direction

animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。

 

语法

animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal

值

值描述
normal每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
reverse反向运行动画，每周期结束动画由尾到头运行。
alternate动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
alternate-reverse动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

例子

HTML 

<div class="stage">
  <figure class="ball"></figure>
</div>

CSS 

@keyframes 'slide' {
  from {
      left: 0;
      top: 0;
  }
  50% {
      left: 244px;
      top: 100px;
  }
  to {
      left: 488px;
      top: 0;
  }
}
.stage {
  background: #ccc;
  border-radius: 6px;
  height: 150px;
  position: relative;
  min-width: 508px;
}
.stage .ball {
  animation-name: slide;
  animation-duration:ion: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;//反向运行动画，每周期结束动画由尾到头运行。
}
.ball {
  background: red;
  border-radius: 50%;
  height: 40px;
  position: absolute;
  width: 40px;
}

执行结果

参考

相关页面


跳至内容顶部