CSS——过渡与动画

在CSS中，过渡和动画是实现界面元素变化效果的两种方式。

1. 过渡（Transition）：

过渡是使元素的一个属性值在一定的时间内平滑的过渡到另一个值。例如，我们可以使用过渡来改变一个元素的颜色，当鼠标悬停在元素上时，颜色会平滑的从一个值过渡到另一个值。

div {
  background-color: blue;
  transition: background-color 1s;
}
 
div:hover {
  background-color: red;
}

在上面的例子中，当鼠标悬停在div上时，背景颜色会在一秒钟内从蓝色平滑的过渡到红色。

2. 动画（Animation）：

动画是使元素的一个或多个属性值在一定的时间内连续变化的过程。例如，我们可以使用动画来让一个元素旋转。

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
div {
  animation: rotate 2s linear infinite;
}

在上面的例子中，我们定义了一个名为rotate的关键帧动画，这个动画将元素从0度旋转到360度。然后我们将这个动画应用到div元素上，动画的持续时间是2秒，变化速率是线性的，并且是无限循环的。

注意：过渡和动画都可以使用不同的时间函数来控制变化速率，例如：ease, ease-in, ease-out, ease-in-out, linear等。