CSS 使用@keyframes与animation实现简单的动画效果

@keyframes 和 animation 是 CSS 中用于创建动画效果的两个属性。它们通常一起使用，但服务于不同的目的：

@keyframes

• 定义动画中的一系列关键帧。
• 关键帧指定了动画在特定时间点的样式。
• 每个关键帧都是一个 CSS 规则块，指定了动画中该点应应用的样式。

animation

CSS animation 属性参数详解可参考 此处

• 将动画应用于元素。
• 指定动画的持续时间、延迟、迭代次数和关键帧名称。
• 关键帧名称引用由 @keyframes 定义的关键帧集合。

使用示例：

/* 定义关键帧 */
@keyframes example {
  0% {
    opacity: 0; // 在动画开始将不透明度设为0
  }
  50% {
    opacity: 1; // 在动画规定时间的一半将不透明度设为1，实现淡入效果
  }
  100% {
    opacity: 0; // 在动画结束时将不透明度设为0，实现淡出效果
  }
}

/* 将动画应用于元素 */
.element {
  animation: example 2s infinite;
}

效果：

上面代码将使元素在 2 秒内执行一个循环的淡入淡出动画。

重要注意事项：

• @keyframes 规则必须在样式表的开头定义，而 animation 属性可以应用于任何元素。
• 每个 @keyframes 规则都必须有一个唯一的名称。
• animation 属性可以接受多个值，每个值都用空格分隔。

其他用法：

除了淡入淡出效果外，你还可以使用 @keyframes 和 animation 创建更复杂的动画，例如：

• 旋转
• 平移
• 缩放
• 颜色变化