(十三).CSS3中的变换(transform)，过渡(transition)，动画(animation)

1 变换 transform

1.1 变换相关 CSS 属性

CSS 属性名	含义	值
transform	设置变换方式
transform-origin	设置变换的原点	使用关键字或坐标设置位置
transform-style	设置子元素处于3D空间还是2D空间	flat：2D空间，默认值。 preserve-3d：3D空间
perspective	设置观察者与平面距离	长度
perspective-origin	设置观察者位置	使用关键字或坐标设置位置
backface-visibility	设置元素背面是否可见	visible：可见，默认值。 hidden：不可见

总结：

1. 行内元素无法设置变换
2. 需要设置给变换的元素的属性：
   transform、tranform-origin、backface-visibility
   需要设置给变换元素的父元素的属性：
   transform-style、perspective、perspective-origin

1.2 2D 变换的方法

① 位移 translate 方法

translateX()				设置水平方向位移
translateY()				设置垂直方向位置
translate()					同时设置水平方向和垂直方向的位移

位移的变换方法参数的设置规则：

1. 使用长度设置位移距离，允许负值
   使用百分比，水平位移参照元素自身宽度，垂直位移参照元素自身高度
2. translate() 如果只设置一个值，表示水平位移的距离，垂直方向不位移。

位移的应用（绝对或固定定位元素的水平和垂直居中）：

/* 水平垂直居中的方案 */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

② 缩放 scale 方法

scaleX()				设置水平方向的缩放比例
scaleY()				设置垂直方向的缩放比例
scale()					同时设置水平方向和垂直方向的缩放比例

缩放的变换方法参数的设置规则：

1. 使用纯数字(倍数)或者百分比表示缩放的比例
2. 使用负数元素自身会反转过来
3. scale() 如果只设置一个值，表示同时设置水平方向和垂直方向的缩放比例

③ 旋转 rotate 方法

rotate()

变换方法参数的设置规则：

1. 使用角度，可以是负值，角度单位是 deg
2. 默认是顺时针旋转
3. 默认旋转中心是元素中心

1.3 3D 变换的方法

① 3D 位移

translateZ()				设置沿z轴位移的距离
translate3D(x,y,z)			同时设置x、y、z轴位移的距离，必须设置3个长度

② 3D 缩放

scaleZ()
scale3D(x,y,z)				同时设置x、y、z轴的缩放，必须设置三个倍数

3D 缩放没有效果！

③ 3D 旋转

rotateX()				x轴旋转
rotateY()				y轴旋转
rotateZ()				z轴旋转，等同于2D旋转 rotate()
rotate3D()				同时沿x轴、y轴、z轴一起旋转，设置4个值，前三个都是0或者1，对应的轴是否旋转，第4个值设置角度

2 过渡 transition

2.1 过渡相关 CSS 属性

CSS 属性名	含义	值
transition-property	设置哪些属性可以过渡	all，默认值. 1个或多个属性，使用逗号分隔。
transition-duration	设置过渡的持续时间	时间单位 s、ms
transition-delay	设置过渡的延迟时间	时间单位 s、ms
transition-timing-function	设置过渡的运动曲线
transition	复合属性	1个时间表示duration，如果两个时间第一是duration，第二个是delay

哪些 CSS 属性可以过渡？

1. 属性的值是长度的，如 width、height、margin、padding、border-width 等等
2. 属性的值是颜色的，如 color、background-color、border-color 等等
3. 属性的值是纯数字，如 opacity、font-weight
4. 变换属性 transform

什么时候设置过渡相关的属性 transition？

在元素的样式变化之前，提前设置过渡相关的属性。

贝塞尔曲线在线工具：

https://cubic-bezier.com

transition-timing-function 设置过渡运动曲线：

ease			平滑过渡，默认值
linear			匀速
ease-in			加速运动
ease-out		减速运动
ease-in-out		先加速再减速
cubic-bezier()	特定的贝塞尔曲线设置运动曲线
steps()			分步运动 ,第一个参数设置步数，第二个参数指定每一步发生的时间点，默认是end，也可以选择start，end 表示先等待，start表示先运动
step-start		等同于 steps(1,start)
step-end		等同于 steps(1,end)

2.2 触发过渡的条件

用户的行为和动作导致元素样式发生改变，如果元素设置了过渡效果，样式的改变具有过渡动画效果

1. 伪类选择器 :hover :active :focus :checked
2. JS 的事件
3. CSS 媒体查询

3 动画 animation

3.1 关键帧

@keyframes 关键帧名字 {
    from {}
    to {}
}

@keyframes 关键帧名字 {
    100% {}
}

@keyframes 关键帧名字 {
    from {}
    40% {}
    80% {}
    to {}
}

Tips：在关键帧中使用2d或3d变换，需要设置相关元素或父元素的属性

关键帧与元素的关系：

1. 一个元素可以设置多个关键帧
2. 一个关键帧可以设置到多个元素上

3.2 动画相关 CSS 属性

CSS 属性名	含义	值
animation-name	设置关键帧	多个使用功逗号分隔
animation-duration	设置动画持续时间	时间
animation-delay	设置动画延迟时间	时间
animation-timing-function	设置动画运动曲线	同 transition-timing-function
animation-iteration-count	设置动画执行次数	数字。 infinite：无数次
animation-direction	设置动画运动方向	normal：正常方向，默认值。 reverse：反向运动。 alternate：交替运动。 alternate-reverse：反向交替运动。
animation-play-state	设置动画运动状态	running：正在运动，默认值。 paused：暂停。
animation-fill-mode	设置规定动画在播放之前或之后的显示状态	none：默认值。 forwards：动画结束后处于结束帧状态。 backwards：动画开始之前处于起始帧状态。 both：兼具forwards和backwards的状态
animation	复合属性	不限制顺序和数量，第一个时间表示animation-duration，第二个时间表示animation-delay