动画

属性

• transition-property：要设置动画的所有属性（多个属性逗号隔开，全部属性使用 all）
• transition-duration：动画持续的时间，单位为秒 s 或者毫秒 ms
• transition-timing-function：时间函数，表示动画进程在时间上的分布，默认值 ease
  • linear、ease、ease-in、ease-out 和 ease-in-out
• transition-delay：动画开始前的延迟时间，单位为秒 s 或者毫秒 ms

#anim {
  transition-property: background-color, color, font-size;
  transition-timing-function: ease;
  transition-duration: 3s;
  transition-delay: 2s;
}

关键帧动画

通过 CSS 提供的 @keyframes 规则整合多个简单的动画

/*  关键字    动画名称   所需时间 速度曲线 何时开始  播放次数    下周期逆向  */
animation: myAnimation   2s    linear   5s    infinite   alternate

/*  动画设置  */
@keyframes myAnimation
{
        from{}
        to{}
}
/*  或者  */
@keyframes myAnimation
{
          0%{}
        100%{}
}

贝塞尔曲线

贝塞尔曲线可以使动画『超出』其原本的范围

cubic-bezier(x1,y1,x2,y2) 通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等 X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大。 如：直线linear，即cubic-bezier(0,0,1,1)

【贝塞尔曲线在线工具】

.test {
  left: 100px;
  transition: left 5s cubic-bezier(.5, -1, .5, 2);
}

阶跃函数

让动画分段进行

• 语法：steps(number of steps[, start/end])
  • number of steps：表示需要拆分为多少段
  • start/end
    • start 表示在动画开始时，立即开始第一段的动画
    • end：表示改变不应该在最开始的时候发生，而是发生在每一段的最后时刻

#test.animate  {
  transform: translate(-90%);
  transition: transform 9s steps(9, start);
}