css3变换过渡动画：

一.变换
1.2D变换
1.1位移translate
transform: translateX(20px);指定对象X轴（水平方向）的平移
transform: translateY(50px);指定对象Y轴（垂直方向）的平移
transform: translate(20px, 50px);第一个参数对应X轴，第二个参数对应Y轴。
transform: translate(20%);还可以用百分比设置。只有一个值，只设置水平方向。
1.2元素水平垂直居中
第一种方法：
position: absolute;
top: 50%;
left: 50%;
margin-top: -(自身高度的一半)px;
margin-left: -(自身宽度的一半)px;
第二种方法：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
1.3缩放scale
transform: scaleX(0.5);指定对象X轴的（水平方向）缩放
transform: scaleY(0.3);指定对象Y轴的（垂直方向）缩放
transform: scale(0.3,0.5);第一个参数对应X轴，第二个参数对应Y轴
transform: scale(2);只有一个值，两个方向也都缩放
1.4旋转rotate
transform: rotate(30deg);正值顺时针转
1.5扭曲skew
transform: skewX(20deg);指定对象X轴的（水平方向）扭曲
transform: skewY(20deg);指定对象Y轴的（垂直方向）扭曲
transform: skew(20deg,30deg);第一个参数对应X轴，第二个参数对应Y轴
transform: skew(50deg);只有一个值，只扭曲一个方向
注意：skewX扭曲是让y轴逆时针变斜，x轴依然是水平的。
1.6多种变换
就是可以连着写。给transform设置多个变换函数，顺序不同，效果不同。
transform: translate(100px) translate(100px) rotate(45deg) scale(1.5);
1.7变换原点
transform-origin 设置或检索对象以某个原点进行变换。默认：center center
transform-origin: left top;
transform-origin: 20px 20px;
如果提供三个值，第一个用于x坐标，第二个用于y坐标，第三个用于z坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%(center)。
对方向，扭曲，缩放有影响，对位移没有影响。
2. 3D变换
给父元素transform-style: preserve-3d;开启3d空间之后，下面的设置才有作用。
2.1 3d位移
translatez() 指定对象Z轴的平移，Z轴上朝向自己的，正值向前，负值向后。正值最大是景深。transform: translateZ(10px);
translate3d(x, y, z) 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
transform: translate3d(100px, 100px, 100px);
2.2 3d缩放
scalez() 指定对象的z轴缩放，无法看出效果
transform: scaleZ(1.5);
scale3d() 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
transform: scale3d(1.5, 1.5, 1.5);指定的是缩放的倍数
2.3 3d旋转
rotatex() 指定对象在x轴上的旋转角度 transform: rotateX(45deg);
rotatey() 指定对象在y轴上的旋转角度
rotatez() 指定对象在z轴上的旋转角度，同rorate()平面旋转一样
rotate3d(x, y, z, a) 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略transform: rotate3d(1,1,1, 45deg);1是沿着x方向转，0是不转。前三个是方向，第四个是角度。
2.4 景深
观察者与屏幕之间的距离，设置给父元素。
transform: perspective(300px) rotateX(45deg);
可作为函数设置，写在前面。
2.5 设置观察者的位置
perspective-origin: left top;
perspective-origin: bottom;另一个值默认是center
默认值：center center
2.6 设置背面不可见
backface-visibility: hidden;
总结：
transform: 指定变换函数（可以指定多个变换函数）
transform-origin: 指定变换的原点 1~3个值
transform-style: perserve-3d 设置到父元素 用于3d
prespective: 指定长度 景深 （观察者距离屏幕的距离）设置到父元素用于3d
prespective-origin: 观察者位置 设置到父元素 用于3d
backface-visibility: hidden 设置背面不可见 用于3d
二.过渡
1.css3触发过渡的条件
①.伪类触发 :hover
②.时间触发 单击
③.媒体查询
@media (max-width: 800px) {
.box2 {
width: 800px;
}
}当页面的宽度小于800px的时候，就会触发box2的事件，box2会把自己的宽度变成800。
2.过渡属性
①.transition-duration 设置对象过渡的持续时间。谁过渡指定给谁
transition-duration: 5s;
②.transition-property 设置对象中的参与过渡的属性
none： 不指定过渡的css属性
all： 所有可以进行过渡的css属性 （默认值）
IDENT： 指定要进行过渡的css属性 ，如果提供多个属性值，以逗号进行分隔。
transition-property: width,height;
3.过渡的动画效果
transition-timing-function 设置对象中过渡的动画类型
①.ease： 平滑过渡。transition-timing-function:ease;
linear： 线性过渡。 ease-in： 由慢到快。
ease-out： 由快到慢。 ease-in-out： 由慢到快再到慢。
②.step-start： 等同于 steps(1, start) step-end： 等同于 steps(1, end)
steps( )： 接受两个参数。第一个参数是步数。第二个参数可以是start或end，第二个参数是可选的，默认值为end。
transition-timing-function: steps(10);分10步到达终点。
③.cubic-bezier( )： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内,超过1会过渡到外面再回来。
transition-timing-function: cubic-bezier(.58,.38,.59,1.42);
在线制作贝塞尔曲线： https://cubic-bezier.com/#.17,.67,.83,.67
4.过渡延迟
transition-delay 设置对象延迟过渡的时间。
transition-delay: 2s;等2s后再执行动画。
5.过渡复合属性
transition: 复合属性
transition: duration delay property timing-function
transition: 2s 1s width linear ;
过渡时间 延迟时间 过渡属性 动画效果
6.过渡事件
transitionstart 过渡开始时触发 (延时之后)。
transitionrun 过渡开始时触发 (延时之前)。
transitioncancel 过渡中断。
transitionend 过渡完成后触发。
三.动画
1.关键帧
①.@keyframes changeColor {
0%{
background-color: red;
}
50%{
background-color: skyblue;
}
100%{
background-color: greenyellow;
}
}
②.@keyframes changeOffset {
from{
transform: translateX(0);
}
to{
transform: translateX(600px);
}
}
给box设置动画：
animation-name: changeColor;设置对象所应用的动画名称
animation-duration: 2s;设置对象动画的持续时间
动画结束后，一切恢复原样。
2. 动画属性
①.animation-name: 指定关键帧名称animation-name: changeColor;
②.animation-duration: 指定动画执行时间animation-duration: 2s;
③.animation-interation-count: 指定动画的循环次数 animation-iteration-count: 2;
number:动画循环次数
infinite： 无限循环
④.animation-diration是否反向运行或者交替运动
animation-direction: reverse;
normal： 正常方向 (默认)
reverse： 反方向运行
alternate： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse： 动画先反运行再正方向运行，并持续交替运行
⑤.animation-timing-function运行时动画类型
animation-timing-function: linear;
ease： 平滑过渡。和过渡的值一样
⑥.animation-delay : 指定对象动画的延迟时间
animation-delay: 1s;
⑦.animation-play-state设置对象动画的状态，配合js，单击按钮，把动画设置为 running： 运动 (默认) paused： 暂停
box.style.animationPlayState = ‘running’;
⑧.animation-fill-mode: 指定动画之外的状态
none： 默认值。不设置对象动画之外的状态
forwards： 动画结束了处在结束帧
backwards： 动画开始时瞬间处在开始帧
both： 动画开始时瞬间处在开始帧，动画结束了处在结束帧
animation-fill-mode: forwards;
⑨.animation: 复合属性 动画持续时间在前，延迟时间在后，其它的随意。
3. 动画事件
animationstart 动画开始（延迟之后）
animationend 动画结束
animationiteration 动画每重复一次就触发一次