如何在CSS中实现透明度渐变动画_使用CSS animation和opacity实现元素渐显渐隐效果

用CSS animation和opacity可实现元素循环呼吸效果。1. 定义@keyframes动画，如fade或fadeInOut，设置0%到100%的透明度变化；2. 将animation属性应用于目标元素，指定动画名称、时长、速度曲线和infinite循环；3. 调整关键帧起始值控制初始状态，实现从可见到渐隐再渐显的呼吸效果，适用于提示图标或加载状态，无需JavaScript即可提升界面动效体验。

想让一个元素在页面上慢慢出现，再慢慢消失，形成循环的呼吸效果？用 CSS 的 animation 和 opacity 就能轻松实现。不需要 JavaScript，只需几行样式代码。

基本原理：利用 opacity 控制透明度

opacity 属性取值范围是 0 到 1，0 表示完全透明，1 表示完全不透明。通过关键帧（@keyframes）定义透明度的变化过程，再绑定到元素上，就能实现渐变动画。

例如，让一个 div 从透明到完全显示再到透明：

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

应用动画到元素

写好关键帧后，用 animation 属性将它应用到目标元素。可以控制动画时长、重复次数、速度曲线等。

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

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

.fade-element {
  width: 100px;
  height: 100px;
  background: #3498db;
  animation: fade 3s ease-in-out infinite;
}

• fade：动画名称，对应 @keyframes 定义的名字
• 3s：动画持续3秒
• ease-in-out：开始和结束较慢，中间较快
• infinite：无限循环播放

调整动画节奏与起始状态

有时你希望元素一开始就是可见的，然后淡出再淡入循环。可以调整 keyframes 的起点：

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

这样看起来像“呼吸”效果，适合提示性图标或加载标识。

还可以使用 animation-delay 延迟启动，或 animation-fill-mode: forwards 保持最后一帧，根据实际需求灵活设置。

以上就是如何在CSS中实现透明度渐变动画_使用CSS animation和opacity实现元素渐显渐隐效果的详细内容，更多请关注php中文网其它相关文章！