CSS 之 帧动画（Keyframe Animation）
CSS 关键帧动画（Keyframe Animation）是使元素从一个样式逐渐变化为另一个样式的过程。关键帧动画通过指定动画的名称、持续时间以及变化的关键帧来实现。
以下是一个简单的关键帧动画示例，它会使一个元素的背景颜色从红色渐变到蓝色：
@keyframes colorChange {
from {
background-color: red;
}
to {
background-color: blue;
}
}
.animated-box {
width: 100px;
height: 100px;
animation-name: colorChange;
animation-duration: 2s;
animation-fill-mode: forwards; /* 保持动画结束时的状态 */
}HTML 部分：
<div class="animated-box"></div>在这个例子中，.animated-box 类定义了动画的持续时间和动画的名称 colorChange。@keyframes colorChange 规则定义了动画的关键帧，从红色 (from) 渐变到蓝色 (to)。animation-fill-mode: forwards; 确保动画结束后元素保持结束状态的颜色。
评论已关闭