CSS动画元素渐隐渐现如何实现_通过CSS animation结合opacity制作元素淡入淡出

  • CSS动画元素渐隐渐现如何实现_通过CSS animation结合opacity制作元素淡入淡出已关闭评论
  • A+
所属分类：教程文章
摘要

使用@keyframes定义动画序列，控制opacity从0到1再到0；2.通过animation属性将动画应用到元素，设置时长、速度曲线和循环次数；3.设置初始透明度并优化交互行为，可选forwards保持最终状态，适用于提示框、轮播图等场景。

css动画元素渐隐渐现如何实现_通过css animation结合opacity制作元素淡入淡出

要实现元素的淡入淡出效果，可以通过CSS的animation属性结合opacity来控制透明度变化。这种方法无需JavaScript，性能好且易于维护。

1. 定义关键帧（@keyframes）

使用@keyframes创建一个动画序列，控制元素从完全透明到不透明（淡入），再回到透明（淡出）。

示例：

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

这个动画在中间时刻（50%）达到完全不透明，前后为透明状态，形成一次完整的淡入淡出循环。

2. 应用动画到元素

将定义好的动画通过animation属性绑定到目标元素上，并设置持续时间、执行次数等参数。

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

CSS动画元素渐隐渐现如何实现_通过CSS animation结合opacity制作元素淡入淡出

GPTKit

一个AI文本生成检测工具

CSS动画元素渐隐渐现如何实现_通过CSS animation结合opacity制作元素淡入淡出
108

查看详情
CSS动画元素渐隐渐现如何实现_通过CSS animation结合opacity制作元素淡入淡出

.fade-element {
  animation: fadeInOut 3s ease-in-out infinite;
}

说明：

  • fadeInOut：引用上面定义的关键帧名称
  • 3s：整个动画周期为3秒
  • ease-in-out：动画开始和结束较慢，中间较快，更自然
  • infinite：动画无限循环播放

3. 设置初始样式与过渡优化

确保元素默认状态下可被动画控制，同时可以配合visibility或transition做更精细处理。

.fade-element {
  opacity: 0;
  animation: fadeInOut 3s ease-in-out infinite;
  /* 可选：防止点击穿透 */
  pointer-events: none;
}

若只做单次淡入后保持可见，可省略循环并调整关键帧：

@keyframes fadeInOnce {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<p>.element-show {
animation: fadeInOnce 1s forwards;
}</p>

注意：forwards表示动画结束后保留最终状态。

基本上就这些。利用opacity和@keyframes组合，就能轻松实现平滑的淡入淡出效果，适用于提示框、轮播图、加载遮罩等场景。