如何使用CSS实现元素透明度变化动画_opacity关键帧应用

使用@keyframes定义opacity动画可实现淡入淡出效果，如0%到50%再到100%透明度变化形成呼吸动画，通过animation绑定动画名称、时长、速度曲线和重复次数，结合forwards保持最终状态，适用于提示框或页面过渡。

要实现元素透明度变化的动画，可以使用CSS的@keyframes规则配合opacity属性。这种方法常用于淡入、淡出或循环闪烁等视觉效果。

定义关键帧动画

使用@keyframes创建一个动画名称，并设置不同阶段的opacity值。

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

上面的例子从完全透明（0）变为不透明（1），再回到透明，形成一个呼吸式动画。

将动画应用到元素

通过animation属性把定义好的关键帧动画绑定到目标元素上。

.fade-element {
  width: 100px;
  height: 100px;
  background-color: blue;
  opacity: 0;
  animation: fadeInOut 3s ease-in-out infinite;
}

• fadeInOut：动画名称，需与@keyframes定义的一致
• 3s：动画持续时间
• ease-in-out：速度曲线，开始和结束较慢
• infinite：无限次重复动画

控制动画起始状态

注意opacity的初始值会影响动画表现。如果希望动画从透明开始，元素本身也应设置opacity: 0，否则可能一开始就可见。

也可以只做单次淡入：

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-once {
  animation: fadeIn 2s forwards;
}

forwards表示动画结束后保持最后一帧的状态，不会回退。