css3- animation初探

[summerflowerying]

整理了css3的animation

keyframes定义动画序列:

• 指定一个动画的名称和实际内容
• 简单动画(from to) 复杂动画(0% 50% 100%)

animation

• 负责为元素指定引用的动画, 过渡类型等作出设置

animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s animation-iteration-count: 1 animation-direction: normal animation-fill-mode: none animation-play-state: running

animation-name(默认none)

• 动画名称 必须

animation-duration(默认0)

• 动画的持续时间 单位s或ms 必须

animation-timing-function (默认ease)

• linear 线性过渡。相当于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
• ease 默认。动画以低速开始，然后加快，在结束前变慢 相当于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
• ease-in 由慢到快。相当于贝塞尔曲线(0.42, 0, 1.0, 1.0)
• ease-out 由慢到快。相当于贝塞尔曲线(0.42, 0, 1.0, 1.0)
• ease-in-out 由慢到快再到慢。相当于贝塞尔曲线(0.42, 0, 0.58, 1.0)
• cubic-bezier(n,n,n,n) 特定的贝塞尔曲线 在 cubic-bezier 函数中自己的值。从 0 到 1 的数值。
• steps(5, start): 作用于每两个关键帧之间，而不是整个动画.
  demo地址 step-start效果等于steps(1, start): 以下一帧的显示效果来填充动画 step-end效果等于steps(1, end): 以下一帧的显示效果来填充动画

animation-delay (默认0s)

• 动画延迟的时间
• 单位s / ms
• 负值，动画跳过 2 秒进入动画周期;

animation-iteration-count : 动画播放的次数 (默认是1)

• n: 定义动画播放次数 值是一个正整数 infinite: 规定动画应该无限次播放

animation-direction (默认normal)

• 如果把动画设置为只播放一次，则该属性没有效果。
• 参数:
  • normal: 每个动画循环结束，动画重置到起点重新开始
  • alternate: 动画交替反向运行，反向运行时，动画按步后退，同时，带 时间功能的函数也反向，比 如，ease-in 在反向时成为ease-out。计数取 决于开始时是奇数迭代还是偶数迭代
  • reverse: 反向运行动画，每周期结束动画由尾到头运行。
  • alternate-reverse: 反向交替， 反向开始交替 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。

animation-play-state (默认 running)

• running: 动画正在运行
• paused: 动画已被停止

animation-fill-mode (默认 none)

• none 不改变默认行为。
• forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
• backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应 用开始属性值（在第一个关键帧中定义）。
• both 向前和向后填充模式都被应用。

animate.css

mdn资料

博客

最终的css

• `.com-lession-item { -moz-animation: fadein 0.5s backwards; -o-animation: fadein 0.5s backwards; -webkit-animation: fadein 0.5s backwards; animation: fadein 0.5s backwards; } .com-lession-item0 { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

@keyframes fadein { 0% { opacity: 0; }

100% {
    opacity: 1;
}

}

`