[分享]css两种样式过渡

CSS为我们提供了多种样式过渡的方式，以下介绍其中两种：

1. 逐渐改变样式

transition: property duration timing-function delay;

/* property：指定CSS属性
   duration：过渡时间，单位为秒或毫秒
   timing-function：过渡效果，可选项有ease、linear、ease-in、ease-out、ease-in-out等
   delay：延时时间，单位为秒或毫秒，可选 */

/* 示例 */
div {
  background-color: red;
  transition: background-color 1s ease-in-out 0.5s;
}

div:hover {
  background-color: green;
} 

以上示例中，当鼠标悬停在div元素上时，它的背景色将逐渐从红色过渡到绿色，过渡时间为1秒，过渡效果为先加速后减速，延时时间为0.5秒。

2. 使用关键帧动画

@keyframes anim {
  from {
    /* 初始状态的CSS样式 */
    transform: scale(1);
  }
  to {
    /* 结束状态的CSS样式 */
    transform: scale(1.5);
  }
}

/* 示例 */
div {
  animation: anim 1s ease-in-out 0.5s infinite alternate;
}

/* 注：infinite表示无限循环，alternate表示来回反复播放 */ 

以上示例中，div元素将会按照关键帧动画中定义的样式进行缩放，过渡时间为1秒，过渡效果为先加速后减速，延时时间为0.5秒，且不断反复播放。