keyframes

动画可以根据帧定制不同的动画效果。

语法

@keyframes <identifier> {
    [ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
}

值

值	描述
identifier	帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。
from	起始时间，等效0%。
to	结束时间，等效100%。
<percentage>	动画序列中，触发关键帧的时间点，使用百分值来表示。

例子

HTML

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

CSS

@keyframes 'slide' {
  0% {
    left: 100px;
  }
  40% {
    left: 150px;
  }
  60% {
    left: 75px;
  }
  100% {
    left: 100px;
  }
}
.stage {
  height: 50px;
  position: relative;
  min-width: 538px;
}
.stage .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.ball {
  background: #2db34a;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  width: 50px;
}

执行结果

参考

相关页面


跳至内容顶部