css transition属性

CSS transition 属性用于在元素的某个属性发生变化时，创建平滑的过渡动画效果。它是一个简写属性，可以同时设置四个子属性：

  1. transition-property ：指定要过渡的CSS属性名称。可以是单个属性，也可以是多个属性，用逗号分隔。如果设置为none，则没有属性会获得过渡效果；如果设置为all，则所有属性都将获得过渡效果；如果指定具体属性，则仅指定属性会获得过渡效果。

  2. transition-duration ：指定完成过渡效果需要的时间。可以以秒(s)或毫秒(ms)为单位。如果未设置此属性，则默认为0，表示没有过渡效果。

  3. transition-timing-function ：指定过渡效果的速度曲线。常见的时间函数有linear(匀速)、ease(渐入渐出)、ease-in(加速渐入)、ease-out(加速渐出)、ease-in-out(加速渐入渐出)和cubic-bezier(...)(自定义贝塞尔曲线)。

  4. transition-delay ：指定过渡效果何时开始。以秒(s)或毫秒(ms)为单位。如果未设置此属性，则默认为0，表示过渡效果立即开始。

示例

以下是一个简单的示例，展示了如何使用transition属性来创建一个按钮在鼠标悬停时改变背景颜色的动画效果：

button {
  padding: 1em 2em；
  background: #fff；
  transition: background 1s linear；
}

button:hover {
  background: deeppink；
}

在这个示例中：

  • transition-property 被设置为 background，表示仅对背景颜色进行过渡。

  • transition-duration 被设置为 1s，表示过渡效果持续1秒。

  • transition-timing-function 被设置为 linear，表示过渡效果以匀速进行。

  • transition-delay 被设置为 0，表示过渡效果立即开始。

浏览器支持

transition 属性在大多数现代浏览器中都有很好的支持。以下是支持该属性的浏览器版本信息：

属性 浏览器支持情况
transition 所有现代浏览器

通过合理使用transition属性，可以轻松地为网页元素添加平滑的动画效果，提升用户体验。

Top
×
×