动画
在CSS中,@keyframes
规则用于定义动画的关键帧,从而控制动画在不同时间点的样式变化。你可以使用两种常见的方式来定义关键帧:
-
使用
from
和to
关键字: -from
相当于0%
。 -to
相当于100%
。 -
使用百分比:你可以定义任意百分比的关键帧,以更精细地控制动画的中间状态。
这两种方式都可以用来创建复杂的动画效果。选择哪种方式取决于你的具体需求和动画的复杂程度。
定义动画
//使用 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
属性,我们可以将两个动画应用到同一个元素上。第一个动画改变颜色,第二个动画改变位置,它们将同时运行。
请注意,当应用多个动画时,每个动画的参数需要用逗号分隔。这样,浏览器就可以识别并同时运行这些动画。