如何在CSS中实现内容淡入淡出动画_opacity transition与keyframes结合-css教程-PHP中文网

如何在CSS中实现内容淡入淡出动画_opacity transition与keyframes结合

P粉602998670

发布： 2025-11-05 16:01:11

原创

921人浏览过

使用opacity结合transition或@keyframes可实现CSS淡入淡出动画：transition适用于状态切换，如hover效果；@keyframes适合独立动画，如加载时自动淡入；两者可组合使用，实现初始淡入并支持交互式淡出。

如何在css中实现内容淡入淡出动画_opacity transition与keyframes结合

在CSS中实现内容的淡入淡出动画，可以通过 opacity 属性结合 transition 或 @keyframes 来完成。两种方式各有适用场景：transition 适合简单的状态切换，而 keyframes 更适合复杂或独立控制的动画流程。

使用 opacity + transition 实现淡入淡出

当你希望元素在显示或隐藏时平滑过渡，可以使用 transition 控制 opacity 的变化。

常见于 hover 效果、显隐切换等交互场景。

示例：

HTML:

立即学习“前端免费学习笔记（深入）”；

<div class="fade-box">悬停我</div>

登录后复制

CSS:

.fade-box {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.fade-box:hover {
  opacity: 0.3;
}

登录后复制

这样，当鼠标悬停时，元素会用 0.5 秒逐渐变透明，移开后又恢复，实现平滑的淡入淡出效果。

使用 @keyframes 实现独立淡入动画

如果需要元素在加载时自动执行一次淡入，或者循环播放动画，@keyframes 更合适。

PHP与MySQL程序设计3

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。本书内容全面深入，适合各层次PHP和MySQL开发人员阅读，既是优秀的学习教程，也可用作参考手册。

255

查看详情

你可以定义从透明到不透明的动画过程，并将其绑定到元素上。

示例：淡入动画

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

.fade-in-element {
  animation: fadeIn 1s ease forwards;
}

登录后复制

应用此样式后，元素会从完全透明逐渐变为可见，并在动画结束后保持最终状态（forwards 的作用）。

组合使用 transition 与 keyframes 实现双向淡入淡出

有时你既想有初始加载的淡入，又希望在用户操作时再次触发淡出或重新淡入。

可以结合两者：用 keyframes 处理初始化动画，transition 处理交互响应。

示例：先自动淡入，再支持 hover 淡出

.combined-fade {
  opacity: 1;
  animation: fadeIn 1s ease forwards;
  transition: opacity 0.4s ease;
}

.combined-fade:hover {
  opacity: 0.2;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

登录后复制

这个元素会在页面加载时自动淡入，之后每次悬停都会缓慢变透明，松开后恢复。

基本上就这些。关键在于理解 transition 是状态之间的平滑过渡，而 keyframes 是定义动画帧序列。根据需求选择或组合使用，就能实现自然的淡入淡出效果。

以上就是如何在CSS中实现内容淡入淡出动画_opacity transition与keyframes结合的详细内容，更多请关注php中文网其它相关文章！