动画

关键帧(@keyframes)

用于定义动画在不同阶段的状态。

@keyframes moveDown {
    0% {    /** from */
        top: 0px;
    }
    50% {
        top: -100px;
    }
    100% {  /** to */
        top: -200px;
    }
}

该例子表明,我们创建了一个名为 moveDown 的keyframes,并设置了三个状态0%,50%,100%下的样式。

也支持 from 和 to 的方式。其中,

from 等效于 0%,to等效于 100%。

animation

animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name, 动画名称, 由@keyframes声明
  • animation-duration, 动画时间
  • animation-timing-function, 运动曲线
  • animation-delay, 动画延迟
  • animation-iteration-count, 动画次数
  • animation-direction, 动画方向

注:请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

默认值: none 0 ease 0 1 normal 。

animation-name

由 keyframes 声明。

animation-duration

动画持续时间,单位为s或ms,一般使用秒。

animation-timing-function

默认为ease。

值为:

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear
  • cubic-bezier(number, number, number, number)

animation-delay

默认值0s,表示动画在该元素上后立即开始执行。

该值以秒(s)或者毫秒(ms)为单位。

animation-iteration-count

animation-iteration-count该属性就是定义我们的动画播放的次数。

默认值只播放一次。可设置 infinite 无限次数。

animation-direction

默认为 normal 。

值有:

  • normal,正序播放
  • reverse,倒序播放
  • alternate,交替播放
  • alternate-reverse,反向交替播放
Copyright & copy https://www.zhuyuntao.cn 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-11-03 12:36:28

results matching ""

    No results matching ""