【CSS】关于css的transition属性

CSS的transition属性是一种用于在元素状态发生变化时平滑过渡效果的技术。它允许在元素的属性值改变时设置一个过渡效果，比如从一种样式逐渐过渡到另一种样式。这使得页面的用户界面看起来更加流畅，而不是突然变化。

transition属性通常与伪类（例如:hover）一起使用，当用户与页面元素交互时创建动画效果。

基本语法：

selector {
  transition: property duration timing-function delay;
}

• property:规定要过渡的CSS属性名称。可以是单个属性，多个属性以逗号分隔，或者all表示所有属性。
• duration:规定过渡的持续时间，以秒（s）或毫秒（ms）为单位。
• timing-function:规定过渡效果的时间曲线，如ease、linear、ease-in、ease-out等。
• delay（可选）:规定在过渡开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。

过渡效果	描述
linear	匀速完成整个过渡过程
ease	慢速开始，中途较快，然后慢速结束
ease-in	慢速开始
ease-out	慢速结束
ease-in-out	动画前半段逐渐加速，后半段逐渐减速，相对于ease更平滑
cubic-bezier(n,n,n,n)	自定义三次贝塞尔曲线，n1,n2控制曲线的起始点，n3,n4控制曲线的结束点。

示例：

/* 对于所有的链接，在hover时，文字颜色过渡变为红色，持续时间为0.3秒，采用ease-in-out的时间曲线 */
a {
  color: blue;
  transition: color 0.3s ease-in-out;
}

a:hover {
  color: red;
}

在这个例子中，链接文字颜色在鼠标悬停时将以0.3s的时间从蓝色过渡到红色，过渡效果采用 ease-in-out时间曲线。

使用transition可以应用于多个属性，并通过逗号分隔。此外，还可以使用transition属性的缩写形式transition:property duration，这时默认的timing-function是ease，delay是0。

进阶用法：

transition还有一些进阶的用法，允许更精细的控制和复杂的动画效果。以下是一些transition 的进阶用法：

1.多属性过渡：

transition可以同时过渡多个属性，通过逗号分隔。

.element {
  transition: property1 duration1, property2 duration2, ...;
}

2.transition的初始值：

可以使用initial关键字来将transition设置为属性的初始值。

.element {
  transition: initial;
}

3.transition事件监听：

element.addEventListener('transitionend', function() {
  // 在过渡结束后执行的代码
});

4.过渡的阶段性事件：

使用transitionstart和transitioncancel事件，可以在过渡开始或被取消时执行特定的代码。

element.addEventListener('transitionstart', function() {
  // 在过渡开始时执行的代码
});

element.addEventListener('transitioncancel', function() {
  // 在过渡被取消时执行的代码
});

5.transition的动态更改：

可以通过JavaScript动态更改transition的属性，以便在不同情况下应用不同的过渡效果。

element.style.transition = 'property duration timing-function delay';