css3--简单动画

为什么叫简单动画？

因为他只有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；
}