HTML+CSS进阶用法（中） ——CSS动画

动画

在CSS中，@keyframes规则用于定义动画的关键帧，从而控制动画在不同时间点的样式变化。你可以使用两种常见的方式来定义关键帧：

1. 使用 from 和 to 关键字： - from 相当于 0%。 - to 相当于 100%。

2. 使用百分比：你可以定义任意百分比的关键帧，以更精细地控制动画的中间状态。

这两种方式都可以用来创建复杂的动画效果。选择哪种方式取决于你的具体需求和动画的复杂程度。

定义动画

//使用 from 和 to 关键字：
@keyframes 动画名称{
	from{}	//开始状态
	to{}	//结束状态
}

//使用百分比：
@keyframes 动画名称{
	0% {}
	10% {}
	.....
	100% {}
}

使用动画

animation: 动画名称 动画花费时长;

案例：

动画属性

属性	作用	取值
animation-name	动画名称（必填属性）	后接名称
animation-duration	动画时长（必填属性）	后接时间
nimation-delay	延迟时间	后接时间
animation-fill-mode	动画状态控制（了解即可）	forwards：最后一帧状态、backwards：第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画、linear：线性动画、默认（慢-快-慢）
animation-iteration-count	重复次数	infinite为无限循环、数字（表示重复次数）
animation-direction	动画执行方向	alternate 为反复播放、默认（按照关键帧顺序播放）
animation-play-state	暂停动画	paused为暂停（通常配合:hover使用）

⚠️：加粗是重点哦(*^▽^*)

• animation: 这是CSS中用来定义动画的属性。
• 动画名称: 这是你为动画指定的名称，你可以在@keyframes规则中定义动画的具体效果。
• 持续时间: 这是动画完成一个周期所需的时间，通常用秒（s）或毫秒（ms）表示。
• 速度曲线: 这定义了动画的速度变化，例如linear表示匀速，ease-in表示开始慢，结束快等。
• 延迟: 这是动画开始前的等待时间。
• 重复次数: 这指定了动画应该播放多少次，infinite表示无限次重复。
• 播放方向: 这定义了动画播放的方向，例如normal表示正向播放，reverse表示反向播放，alternate表示交替播放。
• 暂停动画: 这不是CSS动画的标准属性，但可以通过JavaScript来控制动画的暂停和播放。

复合写法：

在CSS中，复合写法允许你将多个动画属性合并在一起，以减少代码量并提高可读性。

animation:动画名称 持续时间 速度曲线 延迟 重复次数 播放方向 暂停动画
/*
  1、合起来写：没有play-state这控制
  2、按照顺序写：如果中间某些属性不需要设置，隔开过就oK
*/

案例：

@keyframes example {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: example 2s ease 0s 1 normal;
}

在这个例子中：

• example是动画名称。
• 2s是持续时间。
• ease是速度曲线。
• 0s是延迟。
• 1是重复次数。
• normal是播放方向。

注意⚠️：CSS动画的复合写法是将这些属性按照一定的顺序排列，而不是使用单独的属性来定义每个动画参数。

多组动画

同一个盒子：可以做多组动画

语法格式：

animation：动画1控制，动画2控制，..；

案例：
    在CSS中，给一个元素应用多组动画，这些动画可以同时运行，也可以按顺序运行。以下是一个多组动画的CSS案例，其中包含了两个动画：一个改变颜色的动画和一个改变位置的动画，它们将同时运行。

/* 定义第一个动画：改变颜色 */
@keyframes colorChange {
  from { color: red; }
  50% { color: yellow; }
  to { color: green; }
}

/* 定义第二个动画：改变位置 */
@keyframes moveRight {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 应用动画到元素 */
.element {
  /* 应用第一个动画 */
  animation: colorChange 2s linear 0s infinite alternate;

  /* 应用第二个动画，同时运行 */
  animation: moveRight 2s linear 0s infinite alternate, colorChange 2s linear 0s infinite alternate;
}

在这个例子中：

• .element 是应用动画的CSS选择器。
• colorChange 是第一个动画的名称，它改变元素的颜色。
• moveRight 是第二个动画的名称，它将元素向右移动。
• 每个动画都有自己的持续时间（2s），速度曲线（linear），延迟（0s），重复次数（infinite），播放方向（alternate）。
• 通过在.element选择器中使用两次animation属性，我们可以将两个动画应用到同一个元素上。第一个动画改变颜色，第二个动画改变位置，它们将同时运行。

请注意，当应用多个动画时，每个动画的参数需要用逗号分隔。这样，浏览器就可以识别并同时运行这些动画。