css3 过渡结束时状态

CSS3过渡效果（Transition）能够在元素的状态发生变化时产生平滑的过渡效果，不会像JavaScript一样突兀地变化。例如，当鼠标悬停在一个元素上时，它的背景色可以平滑地淡入。

过渡效果分为两个状态：开始状态和结束状态。开始状态是元素在过渡效果开始前的状态，结束状态是元素在过渡效果完成后的状态。

过渡效果的完整语法如下：

transition: property duration timing-function delay;

其中，property表示要过渡的CSS属性名称；duration表示过渡的时间长度；timing-function表示过渡效果的缓动函数（比如linear、ease-in、ease-out等）；delay表示过渡效果开始前的延迟时间。

过渡效果的结束状态可以通过CSS3的新伪类选择器“:hover”实现。例如，当鼠标悬停在一个元素上时，可以通过:hover选择器来改变元素的背景色、字体颜色等。当鼠标移开后，可以通过transition属性实现平滑的过渡效果，让元素恢复到开始状态。

例如：

.button {
  background-color: #ccc;
  color: #fff;
  transition: background-color 0.3s linear;
}
 
.button:hover {
  background-color: #007bff;
}

这段代码表示一个按钮元素，在初始状态下它的背景色是灰色，文字颜色是白色。当鼠标悬浮在按钮上时，背景色变成蓝色。当鼠标移开后，背景色将以0.3秒的时间平滑过渡回灰色。