css keyframe

CSS Keyframes 是一种用于创建动画的技术，它允许开发者定义一系列关键帧（Keyframes），每个关键帧定义了动画的不同阶段状态。在 CSS 中，`@keyframes` 规则被用来声明动画，并通过 `animation-name` 属性将其应用到需要动画的元素上。

一个基本的关键帧语法如下：

@keyframes animation-name {
  0% { /* 第一个关键帧，动画开始时的状态 */ }
  25% { /* 第二个关键帧 */ }
  50% { /* 中间关键帧 */ }
  75% { /* 又一个关键帧 */ }
  100% { /* 最后一个关键帧，动画结束时的状态 */ }
}

在这个例子中，动画从开始到结束会按照指定的百分比逐渐过渡。例如，`0%` 表示动画开始，`25%` 到 `75%` 区间内的动画变化可能会更快或更慢，而 `100%` 则表示动画完成。

你可以设置不同的属性值，如位置、颜色、尺寸等，在各个关键帧之间改变，来制作出丰富的视觉效果。例如：

@keyframes example {
  from { background-color: red; }
  to { background-color: blue; }
}

.element {
  animation: example 2s ease infinite; /* 动画名称、持续时间、缓动函数和是否循环 */
}

这将创建一个背景颜色从红色渐变到蓝色并无限循环的动画。