【前端老赵的CSS简明教程】8-1 CSS动画和过渡的概念和使用方法

大家好，欢迎来到本期的前端课程。我是前端老赵，今天我们将学习CSS动画和过渡的概念和使用方法。

CSS动画和过渡可以让我们在页面中添加生动活泼的动态效果，提升页面的用户体验，同时也是现代Web设计中不可或缺的一部分。

首先，我们来介绍一下CSS过渡的概念。CSS过渡（transition）指的是在某个CSS属性发生变化时，设置一个过渡效果，使得变化不那么突兀，而是平滑过渡到新状态。CSS过渡可以应用于任何可以从一个值转换到另一个值的CSS属性，如颜色、大小、位置等等。

举个例子，当我们将鼠标悬浮在一个链接上时，链接的字体颜色发生变化，我们可以使用CSS过渡来让颜色平滑过渡到新的状态。

CSS

a { color: blue; transition: color 0.5s ease; }
a:hover { color: red; }

在上面的代码中，我们将链接的初始颜色设置为蓝色，同时设置了一个颜色变化的过渡效果。当我们将鼠标悬浮在链接上时，链接的字体颜色会从蓝色平滑过渡到红色，过程持续0.5秒。

除了CSS过渡，我们还可以使用CSS动画（animation）来实现更加复杂的动态效果。CSS动画是由多个关键帧（keyframes）组成的，每个关键帧定义了动画中的一个状态，CSS会自动计算中间状态，实现动态效果。

CSS

 @keyframes myanimation {
    0% {
      transform: scale(1);
    }
    50% {
      transfo