太原网站制作_太原网站建设_太原做网站_秘密武器开发者中心
历史搜索

52. CSS3 animation

游客2025-02-20 00:01:53

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

效果如下:

52. CSS3 animation 1

本文是由用户"游客"发布,所有内容的版权归原作者所有。没有经过书面许可,任何单位或个人不得以任何形式复制、转载、引用本网站的内容。否则将追究法律责任。

相关专题