入门 CSS 动画

什么是 CSS 动画？

CSS 动画是指使用 CSS 技术来实现的动画效果。相较于 JavaScript 等脚本语言实现动画效果，CSS 动画具有易学易用、兼容性好、性能高等优势。

CSS 动画的基础知识

动画属性

CSS 动画需要使用一些动画属性来定义动画的效果和特性。这些动画属性包括：

• animation-name: 定义动画的名称；
• animation-duration: 定义动画的持续时间；
• animation-timing-function: 定义动画的时间函数；
• animation-delay: 定义动画的延迟时间；
• animation-iteration-count: 定义动画的迭代次数；
• animation-direction: 定义动画的播放方向；
• animation-play-state: 定义动画的播放状态。

动画关键帧

动画关键帧是定义动画的具体效果的关键。通过在关键帧中定义元素在不同时间点的样式，就可以实现复杂的动画效果。

动画关键帧的语法如下：

@keyframes animation-name {
  0% {
    /* 元素在动画开始时的样式 */
  }
  50% {
    /* 元素在动画中点的样式 */
  }
  100% {
    /* 元素在动画结束时的样式 */
  }
}

如何实现 CSS 动画？

使用 transition 属性实现简单动画

transition 属性可以在元素的状态改变时产生过渡效果，从而实现简单的动画效果。transition 的基本语法如下：

transition: property duration timing-function delay;

其中，property 表示过度效果的 CSS 属性；duration 表示过渡过程的时长；timing-function 表示过渡效果的时间函数；delay 表示过渡效果开始的延迟时间。

例如，要让一个 div 元素在鼠标悬停时背景色从白色变成红色并且有一个 1 秒的过渡效果，可以这样写：

div {
  background-color: white;
  transition: background-color 1s ease;
}

div:hover {
  background-color: red;
}

使用 animation 属性实现复杂动画

animation 属性则更加灵活，可以实现更加复杂的动画效果。animation 的基本语法如下：

animation: name duration timing-function delay iteration-count direction play-state;

其中，name 表示动画关键帧的名称；duration 表示动画的持续时间；timing-function 表示动画效果的时间函数；delay 表示动画开始的延迟时间；iteration-count 表示动画的迭代次数；direction 表示动画的播放方向；play-state 表示动画的播放状态。

例如，要让一个 div 元素实现一个旋转的动画效果，可以这样写：

div {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

结语

以上就是关于 CSS 动画的入门介绍。通过掌握基础知识、灵活运用动画属性和关键帧，可以实现出更加炫酷的动画效果。