52. CSS3 animation-direction属性设置动画播放方向

animation-direction属性主要用来设置动画播放方向。

语法规则：

animation-direction:normal | alternate [, normal | alternate]*

其主要有两个值：normal、alternate

• normal：是默认值，如果设置为 normal 时，动画的每次循环都是向前播放；
• alternate：作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

例如：通过animation-direction属性，将 move 动画播放动画方向设置为alternate，代码为：

animation-direction:alternate;

注意：Chrome 或 Safari 浏览器，需要加入-webkit-前缀！

实例演示

将动画 move 播放方向设置为 alternate。

HTML 代码：

<div><span></span></div>

CSS 代码：

@keyframes move {
  0%{
    transform: translateY(90px);
  }
  15%{
    transform: translate(90px,90px);
  }
  30%{
    transform: translate(180px,90px);
  }
  45%{
    transform: translate(90px,90px);
  }
  60%{
    transform: translate(90px,0);
  }
  75%{
    transform: translate(90px,90px);
  }
  90%{
    transform: translate(90px,180px);
  }
  100%{
    transform: translate(90px,90px);
  }
}

div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  transform: translateY(90px);
  animation-name: move;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: .2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}

效果如下：

以上关于52. CSS3 animation-direction属性设置动画播放方向的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。