CSS的-webkit-animation等前缀属性已废弃，实现fade-out该用什么标准方案？

带-webkit-前缀的-webkit-animation、-webkit-transition确实属于已废弃的非标准语法，目前所有现代浏览器（Chrome、Firefox、Safari 10+、Edge等）均已原生支持无前缀的标准animation、transition属性，直接使用标准属性即可覆盖绝大多数用户场景。

方案1：transition实现（适用于交互触发的状态切换类淡出） #

这类方案适合hover、类名切换等交互场景下触发的动效，实现成本最低：

/* 元素基础样式 */
.target-element {
  opacity: 1;
  visibility: visible;
  /* 配置过渡属性：要过渡的属性名、时长、缓动函数 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 给元素添加该类即可触发淡出 */
.target-element.fade-out {
  opacity: 0;
  /* visibility设为hidden后，元素不再响应点击事件、也不会占据交互层级 */
  visibility: hidden;
}

如果不需要在淡出后隐藏元素交互能力，仅需要视觉透明，可删除visibility相关的配置。

方案2：@keyframes + animation实现（适用于自动播放的淡出） #

这类方案适合页面加载后自动执行、无需交互触发的动效场景：

/* 先定义淡出关键帧 */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* 给目标元素添加该类即可自动执行淡出 */
.auto-fade-out {
  /* 配置参数：动画名、时长、缓动、结束后保持最终帧状态 */
  animation: fadeOut 0.3s ease forwards;
  /* 可选：配置动画延迟播放时间，例如下方配置为页面加载后2s再执行淡出 */
  /* animation-delay: 2s; */
}

注意事项 #

• 若需要淡出后元素完全不占据页面布局空间，可在动画结束后通过JS给元素添加display: none属性，或配合height: 0、padding: 0等过渡属性实现收起效果
• 仅当需要兼容2016年之前发布的极端老旧浏览器时，才需要额外补充前缀属性，常规生产环境直接使用标准无前缀属性即可

内容的提问来源于stack exchange，提问作者1337ingDisorder