为什么叫简单动画？
因为他只有2个状态：最初状态和末态;想要实现复杂动画就必须要用关键帧keyframes:它可以从a跳到b，从b跳到c，....
须知
- 1s=1000ms
- 速度等于位移/时间
v=(200-100)/60
要点
- transition: 过渡样式 时间 速度 （延时）
- 常见过渡：ease ease-in ease-out ease-in-out linear matrix
- transition一定要写在初始态 要有来有回 否则you去无回
动画深刻剖析
- 淡入淡出 :opacity
- 展开和收起: width height
- 位移：top /left/ right /bottom/ margin
雷区
-
var a=.1就是var a=0.1js和java中都可以这么写---》装逼写法 - transition 默认运动方式就是ease，可以省略,效果一样
- opacity默认值是1，所以初始状态可以不写出;但是top是auto，所以初始一定要写;
-
transition : all 1s ease；是什么鬼？它是一种偷懒写法，等价于
transition:
width 1s ease,
height 1s ease;
//初态
.box{
width:100px;
height:100px;
background:red;
transition:
width 1s ease,
height 1s ease 1s; //最后参数表延时可省略，当它等于前面的动画时间则表示按顺序执行，否则为并发;(平级关系同步执行，延迟稍后执行)
}
//末态
.box:hover{
width:200px;
height:200px；
}
