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;
确保动画结束后元素保持结束状态的颜色。
评论已关闭