css3动画包括过渡，形变，动画
过渡transition：
从一种状态（css效果）效果缓慢进入另一种状态（css效果）
transition可以写在原始状态和目标状态中，
写在目标状态中，原始状态不会过渡，写在原始状态中可以两个状态都过渡
指定过渡样式：transition-property
none：没有样式需要过渡
all：代表所有样式需要过渡 默认值
propertys：代表需要过渡的样式列表
样式名称与样式名称之间用逗号隔开
过渡时间：transition-duration
单位：s/ms 秒/毫秒 1s=1000ms
默认 0s 没有过渡
过渡变换的速度函数：transition-timing-function
linear：从开始到结尾都是匀速过渡
ease-in：从慢到块
ease-out：从快到慢
ease-in-out：从慢到快再从快到慢
ease
过渡延迟时间：transition-delay
单位：s/ms 秒/毫秒 1s=1000ms
默认 0s 没有延迟时间
transition:duration delay property timing-function
过渡时间与延迟时间同时存在时，第一个时间代表过渡时间，
第二个时间代表延迟时间
必须写过渡时间，否则不会有过渡效果
形变transform：位置，旋转，缩放，倾斜
transform：形变函数（参数）
2D/3D
transform-origin：形变的参照点
关键字
水平 left center right
垂直 top center bottom
只写一个方向，另一个方向默认为center
px
%
transform:形变函数
形变函数之间用空格隔开
形变函数之中的参数用逗号隔开
形变函数可以同时存在多个
注意：一个选择器中不能有多个transform，使用最后一个
形变与过渡结合时
尽量保持，元素形变函数和目标样式的形变函数一致
scale，会影响过渡效果的有无
2D
位置：translate
translateY（m）：Y轴移动，单位px 正下负上
translateX（m）：X轴移动，单位px 正右负左
translate（x,y）：
只有一个值：代表X轴移动
两个值：同时X轴和Y轴移动
旋转：rotate
rotate(ndeg) 单位deg-角度
正数：沿z轴顺时针旋转
负数：沿z轴逆时针旋转
缩放scale
scale(m)：
0~ 1：缩小
1~ ：放大
~0 ：反转缩放
1个值：水平垂直方向同时放大缩小
2个值：x,y方向按指定值大小进行放大缩小
scaleX(m) ：水平方向缩放
scaleY（m）：垂直方向缩放
倾斜skew
skewX(m)：沿x轴倾斜，正值 ：上左 下右，负值 ：上右下左
skewY(m)：沿y轴倾斜，正值 ：左上右下， 负值 ：右上下左
skew(m,n):
1个值：沿x轴方向倾斜
2个值：同时沿x轴，y轴倾斜
3D
perspective：视距、代表默认情况下物体离眼睛的距离
位置：translateZ(m)：Z轴平移
正值：物体越来越靠近眼睛，超过视距则看不见
负值：物体越来越远离眼睛，值越小，物体越来越小
旋转：
rotateX()：沿着X轴旋转
rotateY()：沿着Y轴旋转
rotateZ()：沿着Z轴旋转
rotate3d()：
需要在3D状态下才有更好的效果
transform-style：设置当前元素是否具有3D空间
preserve-3d：具有3D空间，子元素有3D效果
flat：平面，子元素没有3D效果
缩放：
scaleZ(m)：让本身子元素，在Z轴上伸缩
本身的厚度不会发生任何改变
动画
1.创建动画片段
@keyframes 动画片段名称{
from{原始样式}
to{目标样式}
}
@keyframes 动画片段名称{
0%{样式}
50%{样式}
75%{样式}
100%{样式}
}
百分数：0~100，一次动画时间中的占比
2.执行动画
animation-name:动画片段名称
animation-duration:一次动画的时间
animation-iteration-count:一次动画的时间
infinite:无数次
animation-direction:动画执行的方向
normal：正常情况，从from到to
reverse：反向 从to到from
alternate：正反向，来回执行，从from到to，to到from
alternate-reverse：从to到from from到to
animation-timing-function:动画执行的速度函数
linear ease-in ease-out ease-in-out ease
animation-play-state:动画执行的状态
running：执行动画
paused：暂停动画
简写：
animation：name duration delay direction timing-function play-state
不能省略name duration
animation：动画信息项，动画信息项，动画信息项
可以同时播放多个动画片段