移动Web-CSS进阶2

空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放的效果

• z轴位置与视线方向相同，正值指向用户

• 空间转换也称为3D转换

• 语法：transform:translate3d(x,y,z);

  透视
  目标：使用perspective属性实现透视效果

  • 属性（添加给父级）：取值多为800-1200px间

动画
目标：使用animation添加动画效果，实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否停止）
构成动画的最小单位：帧或动画帧

• 定义动画
  @keyframes 动画名称{
  from{}
  to{}
  }
  或
  @keyframes 动画名称{
  0%{}
  10%{}
  …
  }
• 使用动画
  animation: 动画名称 动画时长;

动画属性：

• animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
• 动画名称和动画时长必须赋值
• 取值不分先后顺序
• 若有两个时间值，第一个时间表示动画时长，第二个表示延迟时间

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	执行完毕时状态	forwords：最后一帧/backwards：第一帧
animation-timing-function	速度曲线	step(num)：逐帧变化
animation-iteration-count	重复次数	infinite：无限循环
animation-direction	动画执行方向	alternate：反方向
animation-play-status	暂停动画	pause为暂停，通常配合:hover使用

• 使用step(num)实现逐帧动画/精灵动画

  • 准备显示区域：设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
  • 定义动画：改变背景图的位置（移动距离是精灵图的宽度）
  • 使用动画：添加速度曲线step(N)，N与精灵图上小图个数相同；添加无限重复效果

• 多组动画

  • 语法：animation:动画1, 动画2, …, 动画N;