前端视觉优化（三）css动画过渡，transition过渡属性

transform3d就不做了。完全不是想象的样子，它不会给你生成一个视觉上的3d物体，只是2d物体翻转时候有3d感觉，是什么感觉：就是近端边长，远端短。甚至还有锯齿出现，兼容性也不好，花里胡哨，美观也是没有。

视频主总结的太好了。直接截图了

四要素介绍

• 过渡属性
  啥是过渡属性，color:xxxx，font-size:xxx，transform:xxxx
  color,font-size,transform就是你要过渡的属性，你指定他们，过渡时候他们就遵循你的规则
• 过渡时间
  可以设置秒s，或者毫秒ms
• 过渡函数
  可能会有兼容问题，注意下浏览器前缀的使用
  ease:默认，慢-快-慢的过渡效果
  liner:匀速
  ease-in:加速
  ease-out:减速
  ease-in-out:慢-加速-减速-慢。和ease差不多吧。。。很难感受出来
• 延迟时间
  可以设置秒s，或者毫秒ms

使用

transition:all 3s 1s linear;

顺序可以乱的，但是第一个时间都是过渡时间。

 ransition:width 2s, height 2s, background-color 2s, transform 2s;

也可以这样
记得！！这个是写在元素本体上的，而不是本体:hover上