CSS3——transition过渡效果

CSS3的transition属性用于设置元素的过渡效果，让属性的变化过程变得平滑。

解法1：基本用法

div {
  transition: width 1s;
  -webkit-transition: width 1s; /* Safari */
}
 
div:hover {
  width: 200px;
}

在上面的例子中，当鼠标悬停在div元素上时，它的宽度会在1秒钟内从当前宽度平滑过渡到200像素。

解法2：设置多个属性的过渡效果

div {
  transition: width 1s, height 1s, transform 1s;
  -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，当鼠标悬停在div元素上时，它的宽度、高度和旋转效果会在1秒内从当前值平滑过渡到指定的值。

解法3：设置延迟时间

div {
  transition: width 1s, height 1s, transform 1s;
  transition-delay: 0.5s;
  -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
  -webkit-transition-delay: 0.5s; /* Safari */
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，过渡效果在元素值改变后0.5秒开始。

解法4：设置过渡的时间函数

div {
  transition: width 1s, height 1s, transform 1s;
  transition-timing-function: ease-in-out;
  -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
  -webkit-transition-timing-function: ease-in-out; /* Safari */
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，过渡效果使用"ease-in-out"时间函数，这意味着开始和结束时速度较慢，中间时速度较快。

解法5：设置过渡效果的持续时间

div {
  transition: width 1s, height 1s, transform 1s;
  transition-duration: 2s;
  -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
  -webkit-transition-duration: 2s; /* Safari */
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，过渡效果的持续时间被设置为2秒。

解法6：使用all代替具体属性

div {
  transition: all 1s;
  -webkit-transition: all 1s; /* Safari */
}
 
div:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

在这个例子中，所有属性的变化都将有1秒的过渡效果。