初学者指南：了解 CSS 动画

骑猪看日落 2023-10-14 13:58 53阅读 0赞

### 介绍 ###

\*\*\*层叠样式表 (CSS)\*\*\*是一种样式表语言，用于设计、组织和美化我们的 Web 内容。CSS 对用标记语言（例如 HTML——超文本标记语言）编写的文档进行样式设置。

CSS 的一个令人印象深刻的功能是它可以用来创建动态和交互式 Web 内容。例如，CSS 执行以下操作：

> 指示活动链接。
> 
> 在鼠标悬停时呈现动态样式。
> 
> 为 Web 内容制作动画等等。

本文的目的是关于 CSS 动画。我们的目标是简化和传达 CSS 动画的概念。我们将在本文中讨论以下内容：

1.CSS动画的含义。

2.规则@keyframe。

3.CSS动画的属性。

4.CSS动画的简写值。

## 先决条件 ##

本文面向寻求提高 CSS 动画知识的初学者和专业人士。虽然您必须对 HTML 和 CSS 有基本的了解，但本文不涉及这些知识。如果您不熟悉 HTML 和 CSS，我建议您在继续阅读本文之前首先需要学习和熟悉。

### 什么是 CSS 动画？ ###

CSS 动画是 CSS 的一项功能，使开发人员能够创建交互式动态 Web 内容，而无需使用 JavaScript 等额外代码。JavaScript 是用于创建交互式动态 Web 内容的流行语言。尽管如此，CSS 动画还是可以创建动态和动画的网页内容。例如，CSS 动画可以执行以下操作：

在运动中创建网页内容/对象。

渲染网页内容的不同颜色和背景颜色。

更改和更新网页内容样式等等。

要实现 CSS 动画，@keyframe必须应用该规则。让我们看看这个@keyframe规则意味着什么。

### 规则是什么@Keyframe？ ###

该@Keyframe规则决定了 CSS 动画代码。假设您想使用 CSS 动画更改元素的背景颜色，则规则@keyframe是指定初始背景颜色和更新后的背景颜色。请参阅下面的示例。

@keyframe example{
       
        
      from {
       
        background-color: red}
      to {
       
        background-color: blue}
    }

该@keyframe规则包含确定 CSS 动画的属性。从上面的例子来看，@keyframe规则包含 2 个属性——“from”和“to”。

“from”属性接受要动画化的 Web 内容的初始 CSS 样式属性。在上面的示例中，“from”属性包含我们初始的 CSS 样式属性，例如背景颜色：红色。

“to”属性接受新更新的 CSS 样式属性。在上面的代码中，“to”属性接受背景颜色的新属性，即蓝色。结果，我们的背景颜色从红色变为蓝色。令人印象深刻吧？让我们看更多例子。

@keyframe example{
       
        
      0% {
       
        background-color: red}
      100% {
       
        background-color: blue}
    }

在上面的代码中，我们使用百分比属性而不是“from”和“to”属性。使用百分比属性是@keyframe规则允许的另一种方式。百分比属性从 0% 开始，到 100% 结束。0% 接受初始 CSS 样式属性，而 100% 接受最终 CSS 样式属性。

该规则的一大特点@keyframe是它可以包含尽可能多的属性。请参阅下面的示例。

@keyframe example{
       
        
      0% {
       
        background-color: red}
      50% {
       
        background-color: green}
      100% {
       
        background-color: blue}
    }

在上面的代码中，我们使用百分比属性将背景颜色更新最多三次。我们可以进一步增加我们的属性，尽可能多。

请注意有关该@keyframe规则的以下几点：

使用时必须指定动画名称@keyframe。

@keyframe必须首先在动画名称之前声明关键字。

该@keyframe规则包含包含在大括号之间的属性。

这些@keyframe属性接受 CSS 样式属性。

CSS 样式属性也包含在大括号内。

### CSS动画的属性 ###

CSS 动画的属性是 CSS 样式属性/属性，可帮助我们为 Web 内容制作动画。为了使 CSS 动画生效，必须指定 CSS 样式属性，例如动画名称、持续时间等。我们来研究一下下面的代码。

/*index.html*/
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>