CSS空间转换透视、动画注意点

158 阅读1分钟

透视(perspective 下面简称pp)

  1. pp给谁添加?给具有3d属性的盒子的最近一级父元素添加
  2. pp是什么意思?视距,透视,景深
  3. pp给了之后会实现什么效果?近大远小,近实远虚
  4. pp是怎么理解的?例如 pp:800px?==>起始距离屏幕800px的地方安排一只眼睛去看屏幕
  5. pp一般取值400px~1200px之间
  6. perspective只是增加了近大远小的效果,并不是真正开启3d /* transform-style: preserve-3d;给谁设置?和pp一样,给具有3d属性盒子的最近一级父元素 */

动画

1.动画的名称不能为running,否则动画不生效;
2.多个动画之间动画的名称不能重复;
3.一次动画完成之后,默认会突然一下回到最初的状态
4.调用动画(animation)
延迟时间:动画开始执行之前要等待的时间 s/ms
动画播放次数:infinite 无限次播放
动画播放方向:alternate 交替播放
速度曲线:默认 ease; ⑴ linear 匀速播放,一般用在补间动画(连续的动画播放) ⑵ steps(次数)一般配合精灵图使用,用在逐帧动画,一步一步的去完成的动画;
执行完毕时的状态:forwards 动画会停在动画结束时的状态;
动画名称和播放一次动画的时长必须写,其他属性需要就写
forwards不能和infinite结合使用,否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间,第一个时间永远表示动画时长,第二个表示等待时间/延迟时间