<!–注意：
1.过度动画需要改变当前样式的时候 才可以触发
2.并不是所有的样式都具有过度效果 比如display：none
3.过度（transition）不要加在改变样式之后
transition-porperty：指定某一个或多个或者所有（all）样式具有动画效果
transition-duration：指定动画运行的时间 s（秒） ms（毫秒） 1s=100ms
transition-timing-function:指定动画运行的方式 （动画曲线）
linear 匀速
ease 慢快慢（默认）
ease-in 慢快
ease-out 快慢
ease-in-out快慢快
transition-delay 当改变动画样式的时候 延迟执行
–>
tranform:
1.旋转
X:沿着X轴转（上下转）
Y:沿着Y轴转（左右转）
Z:沿着Z轴转（默认转）
改变中心点：transform-origin:参数（top left right bottom）
animation:
1.name:定义的函数名
2.duration 动画的持续时间 单位：秒 毫秒
3.timing-function 动画的频率
1）linear-匀速
2）ease-慢快慢
3）ease-in 慢快
4）step-start 执行每一帧 中间没有任何过度
4）step-end 执行每一帧 中间没有任何过度 但是会跳过第一帧
animation-iteration-cout：（参数） 动画循环次数 参数为数字 infinite（无限循环）
animation-direction:可以调整动画的执行方向
1.alternate 当动画执行完毕之后 在反向执行 以正向为开头
2 alternate-reverse 当动画执行完毕之后 再反向执行，一反向为开头
animation-play-state：动画停止的状态
1.paused 停止动画 并且同流在最后一帧
2.running 运行动画 （默认值）
animation-fill-mode： 动画停留在什么位置
1.forewords 动画执行完毕之后停留在最后一帧 以初始值为开始
2.backwards 是以第一针为开始
backface-visibility:hidden; 背面不可见
平移：
translate（参数1（x轴），参数2（y轴）） 有两个参数，代表元素移动的值（x，y）
translateX（）左右移动
translateY（）上下移动
perspective 参数也大 效果越明显
缩放：
transform：scale（参数（X轴），参数（y轴））;参数可以是整数，可以小数
1.会改变自己和子集元素的大小
2.是以中心点向外扩散
scaleX:竖向缩放
scaleY:横向缩放
sclae：一个参数代表x，y轴全部缩放，两个参数 第一个代表x轴 第二个代表y轴
扭曲:transform:skew(360deg)