CSS 动画通过 @keyframes 规则和动画属性来实现。@keyframes 定义了动画的关键帧，而动画属性则控制动画的执行方式。
1. @keyframes 定义动画
@keyframes 用于定义动画的关键帧，指定元素在不同时刻的样式变化。
语法：
@keyframes animationName {
0% {
/* 初始状态 */
transform: translateX(0);
}
50% {
/* 中间状态 */
transform: translateX(100px);
}
100% {
/* 结束状态 */
transform: translateX(0);
}
}
0%表示动画的起始位置（即初始时的样式）。50%表示动画的中间位置（即动画进行到一半时的样式）。100%表示动画的结束位置（即动画结束时的样式）。
你可以用百分比来定义多个关键帧，或者使用 from 和 to 关键词替代 0% 和 100%。
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
2. animation 属性
要在元素上应用动画，你需要使用 animation 相关的属性。
animation-name
指定要应用的动画名称，这个名称需要与 @keyframes 的名称一致。
animation-name: move;
animation-duration
定义动画的持续时间，单位可以是秒（s）或毫秒（ms）。例如：
animation-duration: 2s; /* 动画持续 2 秒 */
animation-timing-function
控制动画的速度曲线，决定动画的过渡是平滑的还是有加速/减速效果。常见值有：
linear: 线性过渡，整个动画的速度保持一致。ease: 先慢后快再慢，默认值。ease-in: 动画开始时较慢，后面逐渐加速。ease-out: 动画开始时较快，最后逐渐减速。ease-in-out: 动画开始和结束时较慢，中间较快。steps(n, start/end): 将动画分割为 n 个阶段，start或end指定步进位置。
animation-timing-function: ease-in-out;
animation-delay
设置动画开始前的延迟时间，单位是秒或毫秒。比如：
animation-delay: 1s; /* 延迟 1 秒后开始动画 */
animation-iteration-count
指定动画的循环次数。可以是具体的数值，或者使用 infinite 让动画无限循环。
animation-iteration-count: 3; /* 动画循环 3 次 */
animation-iteration-count: infinite; /* 无限循环 */
animation-direction
控制动画的播放方向：
normal: 正常播放（默认值）。reverse: 反向播放。alternate: 正常播放一次后反向播放一次。alternate-reverse: 反向播放一次后正常播放一次。
animation-direction: alternate; /* 每次循环交替方向播放 */
animation-fill-mode
定义动画在执行之前和之后，元素的样式应该如何呈现：
none: 默认值，动画不影响元素的初始或最终状态。forwards: 动画结束时保持最后一帧的状态。backwards: 在动画延迟期间，应用第一个关键帧的样式。both: 同时应用forwards和backwards。
animation-fill-mode: forwards; /* 动画结束时保持最终状态 */
animation-play-state
控制动画的播放或暂停。可以使用 paused 来暂停动画，或者使用 running 来继续播放动画。
animation-play-state: paused; /* 动画暂停 */
3. 综合应用例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
/* 定义动画 */
@keyframes move {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
/* 应用动画 */
.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
动画属性解释：
animation-name: move;：指定应用的动画为move。animation-duration: 2s;：动画持续 2 秒。animation-timing-function: ease-in-out;：动画开始和结束时较慢，中间较快。animation-delay: 1s;：动画开始前延迟 1 秒。animation-iteration-count: infinite;：动画无限循环。animation-direction: alternate;：每次动画交替方向。animation-fill-mode: forwards;：动画结束后保持最后一帧的状态。
4. 动画的简写
你也可以使用简写形式将所有动画属性结合成一个 animation 声明：
.box {
animation: move 2s ease-in-out 1s infinite alternate forwards;
}
这段代码的顺序是：
- 动画名称：
move - 持续时间：
2s - 速度曲线：
ease-in-out - 延迟时间：
1s - 循环次数：
infinite - 方向：
alternate - 结束状态：
forwards
通过这些内容，你可以实现非常复杂和灵活的 CSS 动画效果。你可以尝试调整不同的属性值，创建各种有趣的动画效果。
扫一扫
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
