transition过渡 和animation 动画

首先，要知道transition过渡和animation动画都是实现元素运动的一种方式。区别在于：过渡需要人为触发，例如点击触发或者鼠标悬停触发，而animation是可以不需要人为触发。

---

过渡：
一、2D转换
1.1转换方法
translate(x,y);元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

rotate():元素顺时针旋转给定的角度
scale()元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
skew()元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
matrix()方法把所有 2D 转换方法组合在一起。

1.2注意：
1.要有过渡的属性
2.告诉系统属性需要执行的效果
3.必须要有过渡的时长

transition-duration: 5s;//过渡的时长
transition-property: margin-left;// 需要过渡的属性

transform ：rotate（xdeg）旋转
transform： translate（左方向水平距离，下方向垂直距离）负的数值就是反方向。
transform ：scale（1，1.5）缩放，x轴方向和y轴方向，取值是1代表不变

当需要多个效果的时候：空格隔开。
注意：2d旋转会修改初始的x轴方向，所以旋转之后再平移不再是水平方向。

以上，旋转都是以元素自身的中心为参考点修改的。
二、3D转换

以下，形变中心点属性可以修改元素旋转的中心点。
transfo-origin：0,0；
取值有三种：1.具体像素 2.百分比 3.特殊关键字

特殊关键字：
center top left
transfo-origin：left，top；左上角
transfo-origin：center center；中心

旋转轴向
transform rotateZ 围绕着Z轴旋转

-------拓展：
透视
perspective

----盒子阴影
box-shadow：水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影
注意：盒子阴影分为内外阴影，默认外阴影

-----文字阴影
font-shadow

---

animation动画