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

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

语法规则:

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

其主要有两个值:normalalternate

  • 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;
}

效果如下:

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 52. CSS3 animation-direction属性设置动画播放方向

发表回复