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.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.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