CSS动画

定义

• 由许多静止的画面(帧)以一定的速度(比如30张/秒)连续播放
• 肉眼因为视觉残象产生错觉误以为是活动的画面

• 影视的帧数:24帧/秒，游戏30帧/秒

  一个最简单的例子

• 将div从左往右移动

• 空
• 原理:
  • 每过一段时间(用setInterval做到)将div移动一小段距离，直到移动到目标地点

• 注意性能:

  • 绿色表示重新绘制(repaint)了，css暄软过程依次包含布局、绘制、合成
  • 其中布局和绘制有可能被省略
  • Demo1(此方式是通过改变left的方式实现，一般不用)
  • Demo2(此方式比使用改变left的方式性能方面会有所提高)

    浏览器渲染过程

• 步骤

  1. 根据THML构建HTML树(DOM)
  2. 根据CSS构建CSS树(CSSOM)
  3. 将两棵树合并成一棵渲染树(render tree)
  4. Layout布局(文档流、盒模型、计算大小和位置)
  5. Paint绘制(把边框颜色、文字颜色、阴影等画出来)
  6. Compose合成(根据层叠关系展示画面)

     三种更新样式的方式：

1. js>style>layout>paint>composite
   1. Demo1
2. js>style>paint>composite
   1. Demo2
3. js>style>composite
   1. Demo3

      transform四个常用功能

• translate 位移
• scale 缩放
• rotate 旋转
• skew 倾斜
• 经验:
  • 一般都需要配合translate过渡
  • inline元素不支持translate

    跳动的心Demo

transition 过渡

作用：补充中间帧
语法：

• transition:属性名 时长 过渡方式 延迟
• transition:left 200ms linear
• 可以用逗号分隔两个不同属性
  • transtion:left 200ms,top 400ms
• 可以用all代表所有属性
  • transition:all 200ms
• 过渡方式有:linear、ease、ease-in、ease-out、ease-out、cubic-bezier、setp-start、step-end、steps

• 过渡必须要有起始。一般只有一次动画或者两次，比如hover和非hover状态的过渡。

  animation

• 缩写语法

• animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
• 时长: 用秒s或者毫秒ms
• 过渡方式:跟transition取值一样，如linear
• 次数:3或者2.4或者infinite
• 方向:reverse|alternate|alternate-reverse
• 填充模式:none|fowwards|backwards|both
• 是否暂停:paused|running
• 以上的所有属性都有对应的单独属性