type
status
date
slug
summary
tags
category
icon
password
1 变换 transform
1.1 变换相关 CSS 属性
CSS 属性名 | 含义 | 值 |
transform | 设置变换方法 | 变换方法 |
transform-origin | 设置变换原点 | 使用关键字设置。
使用坐标设置 |
transform-style | 设置子元素的空间维度 | flat：子元素在平面空间中，默认值。
preserve-3d：子元素在3D空间中。 |
perspective | 设置观察者距离（透视距离、景深） | 长度 |
perspective-origin | 设置观察者位置 | 使用关键字设置。
使用坐标设置。 |
backface-visibility | 设置元素背面是否可见 | visible：可见，默认值。
hidden：不可见。 |
1.2 2D 变换的方法
① 位移 translate 方法
位移的变换方法参数的设置规则：
② 缩放 scale 方法
缩放的变换方法参数的设置规则：
③ 旋转 rotate 方法
变换方法参数的设置规则：
1.3 3D 变换的方法
① 3D 位移
② 3D 缩放
③ 3D 旋转
2 过渡 transition
2.1 过渡相关 CSS 属性
CSS 属性名 | 含义 | 值 |
transition-duration | 过渡持续时间 | 时间单位：s、ms |
transition-delay | 过渡延迟时间 | 时间单位：s、ms |
transition-property | 设置哪些样式可以过渡 | all：能过渡都过渡，默认值
指定属性名，多个使用逗号分隔。 |
transition-timing-function | 过渡的运动曲线 | 曲线运动、分步运动 |
transition | 过渡复合属性 | 多个值使用空格分隔
一个时间表示持续时间
两个时间，第一个持续，第二个延迟 |
哪些 CSS 属性可以过渡？
什么时候设置过渡相关的属性 transition
transition-timing-function 设置过渡运动曲线：
贝塞尔曲线在线工具：
2.2 触发过渡的条件
3 动画 animation
3.1 关键帧
关键帧与元素的关系：
3.2 动画相关 CSS 属性
CSS 属性名 | 含义 | 值 |
animation-name | 设置关键帧 | 关键字名字，多个使用逗号分隔 |
animation-duration | 动画持续时间 | 时间单位：s、ms |
animation-delay | 动画延迟时间 | 时间单位：s、ms |
animation-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 | 动画复合属性 | 多个值使用空格分隔
一个时间表示持续时间
两个时间，第一个持续，第二个延迟 |
- 作者:昕昕丶未来不是梦
- 链接:https://pisce.buzz/article/web01_h5c3_04
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
