动画基础

动画

2d转化

transform：matrix（2，0.2，0.2，2，30，40）
 第一个2和第四个2分别代表x,y方向的缩放倍数，正值为放大
 两个0.2分别代表y，x方向倾斜度数的正弦值；
 最后两个数30，40分别代表X,Y方向的移动px值

单独表示，则为：

 transform：translate（100px,1oopx）-----向右 ，下方向移动
 transform：rotate（60deg）-----顺时针方向旋转60度
 transform：scale（2 2）-----x,y方向都扩大两倍
 transform：skew（30deg 4odeg）-----分为拉动左上，右下两个角获得的倾斜（上下边平行x轴）及拉住右上，左下两个角获得的倾斜图形（左右边平行于y轴），角度分别为30度和4度。

3d转换

以某个边为定边进行旋转
transform：rotateX（或Y或Z）（30deg）

3d过渡

transition：（all 2s  ） 
     四个值的表示顺序：
     transition-property 
     transition-duration 
     transition-timing-function 
     transition-delay 

 transition-property 规定应用过渡的 CSS 属性的名称。  
 transition-duration 定义过渡效果花费的时间。默认是 0。 
 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 
 transition-delay 规定过渡效果何时开始。默认是 0。