animation-duration

animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。

语法

animation-duration:2s;
animation-duration:2ms;

值

值	描述
<time>	动画样式应用到元素到元素开始执行动画的时间差。该值可用单位为秒(m)和毫秒(ms)。默认值为0s，表示无动画。

例子

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 {
  height: 150px;
  position: relative;
  min-width: 550px;
}
.stage .ball {
  animation-name: slide;
  animation-duration:2s;//动画持续时间2秒
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.ball {
  background: red;
  border-radius: 50%;
  height: 40px;
  position: absolute;
  width: 40px;
}

执行结果

参考

相关页面


跳至内容顶部