# 6.动画
- 1. transition 过渡
transition-property:all;//监听属性
transition-duration:1s;//过渡时间
transition-timing-function:linear;//运动速率
transition-delay:1s;//过渡延迟时间
```html
```
transition-timing-function:cubic-bezier(x1, y1, x2, y2);//x值必须（0，1）
- 2. animation
animation-name//名称
animation-duration//执行时间
animation-timing-function//运动速率
animation-delay//延迟时间
animation-iteration-count:infinite;//执行无限次，默认值为1
animation-direction:reverse;//反向运动，默认值normal
animation-play-state:paused;//不推荐使用
animation-fill-mode:none | forwards | backwards | both;//forwards:在动画运动结束后，保持动画最后一帧的状态;backwards:在动画运动开始前，保持动画第一帧的状态;both:在动画结束胡，保持动画最后一帧的状态, 在动画开始前，保持动画第一帧的状态;
```html
```
- 3. step
steps(1, end); === step-end;
steps(1, start); === step-start;
```html
```
- 4. transform
rotate:
transform:rotate(0deg);//旋转度数
taransform-origin:0 0;//旋转中心点
transform:rotateX(0deg);//围绕X轴旋转
transform:rotateY(0deg);//围绕Y轴旋转
transform:rotateZ(0deg);//围绕Z轴旋转
transform:rotate3d(x,y,z,angle);//围绕自定义矢量旋转
scale: 伸缩的是此元素的变化坐标轴的刻度（若x为2，则原来x轴的100被拉伸为200的长度，但是现在100的刻度代表200的长度。就像皮筋一样上面标上刻度100，被拉长了2倍，但是皮筋上的刻度未变，但现在100刻度代表了200的长度一样。所以再对x轴进行长度操作如平移100刻度，实际上平移了200的长度）
scale(x, y);//x.横坐标伸缩的倍数;y.纵坐标伸缩的倍数;
scalex();
scaley();
scalez();
scale3d();
可以叠加操作
transform:scale(.5, .5) scale(3, 3);//实际操作倍数0.5*3
skew: 倾斜
transform:skew(xdeg, ydeg)
不仅倾斜了，坐标轴刻度也被拉伸了，因为倾斜过后，元素高度保持不变
倾斜的是坐标轴而不是元素本身，若设置了xdeg那么y轴角度变化，若设置了ydeg那么x轴角度发生变化。
xdeg:表示x轴扭曲度
x扭曲 = y旋转+y伸缩
x取值为正，x轴不动，y轴朝着x轴正方向倾斜x度数
x取值为负，x轴不动，y轴朝着x轴负方向倾斜x度数
ydeg:表示x轴扭曲度
y扭曲 = x旋转+x伸缩
y取值为正，y轴不动，x轴朝着y轴正方向倾斜x度数
y取值为负，y轴不动，x轴朝着y轴负方向倾斜y度数
translate:平移
transform:translate(xpx,ypx);//平移xpx和ypx
transform:translatex(xpx);
transform:translatey(ypx);
transform:translatez(zpx);
元素居中，不知道元素的宽度：
left:50%;
transform:translatex(-50%);
用于父元素的属性
perspective:景深(按照投影理解，比较好理解)
取值1到正无穷px，默认值为0
perspective-origin: 300px 200px;//从元素左上角开始计算
用于自身元素的属性
transform:perspective(800px);
用于父元素属性
transform-style:preserve-3d;//渲染3d效果
用于自身元素的属性：
backface-visibility：visible | hidden;//背面元素是否可见
```html