如何实现图标逐个延迟渐显的动画效果？

CSS 纯代码实现方法 #

适合图标数量固定的场景，通过关键帧动画和递增延迟实现逐个渐显：

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); /* 可选添加位移增强视觉层次 */
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.container {
  display:flex;
  gap: 8px;
  flex-flow: row wrap;
}

.container > img {
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px;
  opacity: 0; /* 初始隐藏 */
  animation: fadeIn 0.5s ease-out forwards; /* forwards 保持动画结束状态 */
}

/* 为每个图标设置递增的延迟 */
.container img:nth-child(1) { animation-delay: 0s; }
.container img:nth-child(2) { animation-delay: 0.1s; }
.container img:nth-child(3) { animation-delay: 0.2s; }
.container img:nth-child(4) { animation-delay: 0.3s; }
.container img:nth-child(5) { animation-delay: 0.4s; }
.container img:nth-child(6) { animation-delay: 0.5s; }
.container img:nth-child(7) { animation-delay: 0.6s; }
.container img:nth-child(8) { animation-delay: 0.7s; }
.container img:nth-child(9) { animation-delay: 0.8s; }
.container img:nth-child(10) { animation-delay: 0.9s; }

可根据需求调整动画时长（0.5s）和延迟间隔（0.1s）。

JavaScript 动态实现方法 #

适合图标数量不固定的场景，通过遍历元素并设置定时器逐个触发显示：

CSS 基础样式

.container {
  display:flex;
  gap: 8px;
  flex-flow: row wrap;
}

.container > img {
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* 使用过渡动画 */
}

/* 定义显示状态的类 */
.container img.fade-in {
  opacity: 1;
  transform: translateY(0);
}

JavaScript 逻辑

document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('.container img');
  const delayInterval = 100; // 每个图标延迟100毫秒

  images.forEach((img, index) => {
    setTimeout(() => {
      img.classList.add('fade-in');
    }, index * delayInterval);
  });
});

CSS + JavaScript 结合实现 #

兼顾 CSS 动画的可维护性和 JS 的动态扩展性：

CSS 部分

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

.container {
  display:flex;
  gap: 8px;
  flex-flow: row wrap;
}

.container > img {
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px;
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: calc(var(--delay) * 1s); /* 通过CSS变量接收延迟值 */
}

JavaScript 部分

document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('.container img');
  const delayStep = 0.1; // 每个图标递增0.1秒延迟

  images.forEach((img, index) => {
    img.style.setProperty('--delay', index * delayStep);
  });
});

内容的提问来源于stack exchange，提问作者Emanoel José