css3过渡动画——transition属性

作者：System 时间：2024年08月04日分类：所有,css3 字数：588

CSS3的transition属性用于在一定的时间间隔内平滑地改变元素的某个属性值。这个属性是四个过渡属性的简写，包括：

transition-property：规定设置过渡效果的CSS属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线，如ease（逐渐变慢）、linear（匀速）、ease-in（缓慢开始）、ease-out（缓慢结束）等。
transition-delay：定义过渡效果何时开始。

例如，如果你希望一个元素的背景色在2秒内从红色变为蓝色，你可以这样写：

element {
  transition: background-color 2s;
}

element:hover {
  background-color: blue;
}

在这个例子中，当你把鼠标悬停在元素上时，元素的背景色会在2秒内平滑地过渡到蓝色。

请注意，为了产生过渡效果，你需要设置transition-duration属性，否则时长为0，就不会产生过渡效果。同时，你可以通过调整transition-timing-function属性来控制过渡动画的速度曲线，从而实现不同的动画效果。