animation与transition区别

transition：

过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；默认值分别为：all 0 ease 0

1、局限性：

1）只能设置一个属性

2）需要伪类/事件触发才执行

3）只能设置动画初始值和结束值

2、过渡函数：

liner ：匀速

ease-in：减速

ease-out：加速

ease-in-out：先加速再减速

cubic-bezier：三次贝塞尔曲线

 

3、以下情况下，属性值改变不能产生过渡效果

1）background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等，浏览器支持情况

2）float浮动元素

3）height或width使用auto值=>解决：用js计算

4）display属性在none和其他值（block、inline-block、inline）之间变换 =>解决：加上延时 setTimeout(function(){ },0)

5）position在stativ和absolute之间变换

 

animation：

1）可以控制到每一帧

2)  结合@ keyframes使用

参考：https://www.cnblogs.com/shenfangfang/p/5713564.html

配合动画：

1）宽高变化
　　高度从0到auto：

　　a、用max-height （缺陷：实际内容不会达到该高度,卡顿）

　　b、transition+js

2）缩放scale（中心开始）

3）位置移动

　　a、transform: translate（不适用position: absolute;transform: translate布局）

　　b、top/left/right/bottom与absolute

　　c、margin-top（left,right,bottom）