css:2D变换与3D动画

1. 过渡：
   （1）只关心元素的初始状态和结束状态，不能获取元素在过渡中每一帧的状态。
   （2）在元素首次渲染还没有完成的情况下,不会触发过渡
   （3）在绝大部分变换样式切换时,如果变换函数的位置个数不相同也不会触发过渡

transition-property
指定过渡动画的属性
transition-duration
过渡时间，正值且必须带单位（包括0）
transition-timing-function
过渡动画的形式，默认值为ease
transition-delay
过渡延迟
Transitionend
每个事件完成时都会触发此事件
当属性值的列表长度不一样时
超出的情况会被裁剪
不够的情况，关于时间的会重复列表

简写属性推荐顺序：
过渡时间，过渡样式，过渡形式，延迟时间[，过渡时间，过渡样式，延迟时间]
2.变换
（1）2D变换transform:允许你修改css视觉格式模式的坐标空间，只对block级元素生效。
旋转（rotate）
平移（translate）
倾斜（skew）
缩放（scale）
基点的变换：transform-origin :改变一个元素变形的基点
矩阵matrix（需知道勾股定理，三角函数，角度与弧度的转换）：旋转,平移,倾斜,缩放.
变换组合时，方向从右向左，就是矩阵的计算

top,height，left,margin,padding,width 百分比参照于包含块的高度
translate(-50%,-50%) 百分比参照于自身的高度
background-position 百分比参照于（图片区域-图片的位图像素值）的高度

（2）3D变换:旋转,平移,缩放
景深perspective：肉眼到屏幕的距离。
写法（2种）：
css属性
transform属性的一个变换函数（必须是第一位）
作用：
让3D场景有近大远小的效果，是一个不可继承属性，但可作用于元素后代（不作用于本身）。
景深基点perspective-origin：视角的位置,默认值为50%。
景深叠加

灭点：景深越大，灭点越远，元素变形越小。
transform-style：构建具有层级的3d舞台，作用于子元素。不可继承。
Backface-visibility
隐藏元素背面
一个元素分两面，元素没有厚度。在一个状态下，元素只能展示自己的一面

！！百分比参照于谁？
元素垂直水平居中方案：
已知高宽：（伪代码）
1.position=absolute,lrtb=0,margin=auto,包含块一定的容器。
绝对定位盒模型的特性：margin为auto
Left+right+width+padding+margin=包含块宽度
Top+bottom+height+padding+margin=包含块高度
2.position=absolute,lt=50%,包含块一定的是容器，marginT/L为负的自身的一半
3.position=absolute,lt=50%,包含块一定的是容器，transform:translate3d(-50%,-50%,0)
4.flex
未知高宽：
1. position=absolute,lt=50%,包含块一定的是容器，transform:translate3d(-50%,-50%,0)
2.flex
Img元素如何垂直水平居中：
1.基线

（3）3D动画
动画内的属性：
animation-name：关键帧的名字
关键帧：
@keyframes animationName{
Keyframes-selector{
Css-style;
}
}
Keyframes-selector可以是关键帧from(0%)到to()100%
百分比（时间的节点）

animation-duration一个动画周期的时长
animation-timing-function作用于动画内的属性（关键帧）

动画外的属性
animation-delay

只作用于动画内的属性（关键帧）
animation-iteration-count:循环关键帧的次数
animation-direction
animation-fill-mode：管理所有动画外的状态
animation-play-state：动画的运动和静止;

什么是动画外的状态：
From之前
Aniamtiojn-delay
To之后
值：
none:动画外的状态保持在动画之前的位置
backwards:from之前的状态与from保持一致
forwards:to之前的状态与to持一致
botn：backwards+forwards