css3动画

s秒 ms毫秒
transition:1s; 过渡 transition:1s过渡时长(duration) 1s延迟时长(delay);
transition:1s width;指定宽有个过渡
transition:2s width,1s height;指定宽2秒过渡、高1秒过渡
transition-timing-function:ease-in;慢到快 ease快到慢默认值 linear匀速 ease-in-out慢快慢
transition:2s cubic-bezier(0.1 0.6 0.2 0); cubic-bezier:特殊的立方贝塞尔曲线效果

综合写：animation:@keyframes关键帧的名称 一个周期时长 周期数 顺序 过程中的状态
animation-name:rainbow;名称
animation-duration:3s;一个周期的时长
animation-direction:reverse;倒序播放 alternate正序
alternate-reverse正序反序(用hover时与周期次数连用)
animation-iteration-count:2;周期次数 infinite无穷
animation-fill-mode:forwards;动画结束时的状态 backwards开始状态 both none默认值

transform 变形 transform:rotate(45deg);旋转(整体转) 以原点开始顺时针旋转，负值逆时针转
transform:scale（1,2）; 缩放倍率 没有单位
一个值宽高缩放一样倍率，边框会放大。 负值时整个元素会翻转180度再缩放
两个值宽高各自设置缩放倍率，延X轴缩放、水平方向拉伸左右两边的边框会放大；
延Y轴缩放、垂直方向拉伸上下两边的边框会放大。
transform:skew(45deg);倾斜 元素改变形状
skewX延X轴倾斜时正值左右的两个边倾斜度数（逆时针）负值反之
skewY延Y轴倾斜时正值上下的两个边倾斜度数（顺时针）
负值时逆时针、内容也会倒过来
transform:translate(100px 100px);平移(也可负值) 延X轴Y轴平移 默认延X轴平移
以上是以默认中心为基准点，也可设定:transform-origin:x y;或放位置left right等

3D:作用在x、y、z轴
配置场景用(加在父元素上)：perspective视距，transform-style:preserve-3d;3D场景
旋转：transform:rotate3d(1,1,1,45deg);x、y、z轴 是否旋转1转0不转***
缩放倍率：transform:scale3d(2,2,2);z轴上的缩放倍率没有，显示不出来*
倾斜：(与2D用法相同)transform:skew(45deg);无3d效果
平移：transform:translate3d(100px 100px 200px);要给视距，不然z轴上看不出来***