css3关键帧动画
warning:
这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。
CSS3关键帧动画可以使用@keyframes规则来创建。关键帧动画是将动画分解为一系列的关键帧，然后将每个关键帧的样式用百分比来表示（如0%、25%、50%、75%、100%）。在每个关键帧上，可以指定元素的样式。
以下是一个简单的例子，创建一个动画让一个元素的背景颜色从红色渐变到蓝色：
@keyframes colorChange {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
.animated-box {
width: 100px;
height: 100px;
animation: colorChange 2s infinite alternate;
}在这个例子中，.animated-box 类定义了一个动画，名为 colorChange，持续时间为2秒，并且设置为无限次循环，且每次循环方向交替（alternate）。
@keyframes colorChange 规则定义了动画的关键帧。0% 表示动画的开始，100% 表示动画的结束。在每个百分比的状态下，我们设置了不同的 background-color 属性。
评论已关闭