如何使用CSS实现元素透明度变化动画_opacity关键帧应用-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-31 16:33:03

原创

879人浏览过

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

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

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

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

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

登录后复制

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

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

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

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

登录后复制

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

也可以只做单次淡入：

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

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

登录后复制

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

基本上就这些，opacity动画简单有效，适合用在提示框、加载图标或页面过渡中。

以上就是如何使用CSS实现元素透明度变化动画_opacity关键帧应用的详细内容，更多请关注php中文网其它相关文章！

大家都在看：