CSS 过渡和转换

CSS 过渡

CSS 过渡允许您在给定的时间内平滑地改变属性值。

请把鼠标移动到这个元素上，来查看 CSS 过渡效果：

属性：

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

如何使用 CSS 过渡？

如需创建过渡效果，必须明确两件事：

• 您要添加效果的 CSS 属性
• 效果的持续时间

指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear - 规定从开始到结束具有相同速度的过渡效果
• ease-in -规定缓慢开始的过渡效果
• ease-out - 规定缓慢结束的过渡效果
• ease-in-out - 规定开始和结束较慢的过渡效果
• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

CSS 2D 转换

CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。

CSS 2D 转换方法

通过使用 CSS transform 属性，您可以利用以下 2D 转换方法：

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。