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

1 变换 transform

1.1 变换相关 CSS 属性

总结：

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 属性可以过渡？

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 属性

标签：CSS3,动画,元素,缩放,transition,transform,animation,设置,属性
来源： https://www.cnblogs.com/yunyublog/p/16081169.html