过度：transition:all 1s;
2D变形transform是css3中很有代表性的特征之一，可以实现如下动画： 动画效果都是配合过度transition一起使用的
1·移动 translate(x,y); translateX(x)仅仅水平移动 translateY(y)仅垂直方向移动 案例不定宽高垂直居中
2·缩放 scale(x,y); 也可以scaleX(),scaleY()括号中写入倍数
3·旋转 rotate(deg); 正值是顺时针，负值是逆时针 rotateX()围绕x轴旋转，rotateY()围绕y轴旋转3D动画
4 transform-origin 原点的位置，缩放旋转的原点
5 倾斜：skew(deg,deg)
3D变形
rotaleX(),rotateY(),rotateZ()
透视：perspective：视距表示视点距离屏幕的距离，一般作为属性设置给父元素，作用域所有3D转化的子元素
动画animation
在需要动画的元素中使用animation，然后再@keyframes,如下： 综合写法 animation: name duration timing-function delay iteration-count direction fill-mode;
div{
animation: 名字 3s infinite;
}
keyframes 名字{
0%{}
50%{}
100%{}
}
1.animation-name：; 你用@keyframe设置的动画的名字
2.anmation-duration：3s； 动画耗时
3.animation timing-function ：运动速度
默认属性ease（低速开始，加快，低速结束） linear（匀速运动） ease-in（低速开始）
ease-out（低速 结束 ）ease-in-out 低速开始和结束 steps（n）动画分成n步来完成
4.animation-delay ：2s； 延迟时间
5.animation-interation-count：2/infinite（无限次） 动画响应的次数（interation英文意思相互影响）
6.animation-direction: 循环方向
默认normal(默认0~100) / alternate(0~100~0)/ reverse(100~0)/
alternate-reverse(100~0~100)
7.animation-fill-mode 动画等待或者结束时候的状态
forwards 初始状态不能立即执行0%的状态，执行动画完成后保留最后状态
backwards 如在0%时候设置样式，立即执行。动画完成后不会保留最后的结果（有延迟）
both 既能立即执行设置的样式，也会保留最后的结果。
8.animation-play-state （不在简写内） 播放和暂停状态 paused暂停 running 播放
