如何实现CSS元素同时下落并淡出动画？附代码求助

你完全可以添加多个@keyframes，也可以在同一个动画里同时控制多个属性，两种方式都能实现需求，下面给你具体修改方案：

方法一：在同一个@keyframes里同时控制淡出和位移 #

这种方式更简洁，避免多动画同步问题：

.poop::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 50%;
  height: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border: 1px solid #000; /* 补充边框颜色，原代码遗漏 */
}
.poop {
  margin-top: 60px;
  text-align: center;
  font-family: Bungee Spice;
  animation: poop 5s linear forwards;
  animation-play-state: paused;
  position: relative;
}
.poop:hover {
  animation-play-state: running;
}

/* 修改原@keyframes，同时添加位移和淡出效果 */
@keyframes poop {
  from {
    opacity: 1;
    transform: translateY(0); /* 初始无位移 */
  }
  to {
    opacity: 0;
    transform: translateY(200px); /* 向下移动200px，可自行调整距离 */
  }
}

方法二：使用多个@keyframes（逗号分隔动画的正确写法） #

如果你坚持要用多个独立动画，需保证两个动画的时长、缓动函数一致，确保同步：

.poop::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 50%;
  height: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border: 1px solid #000;
}
.poop {
  margin-top: 60px;
  text-align: center;
  font-family: Bungee Spice;
  /* 逗号分隔多个动画，每个动画参数需完整 */
  animation: fadeOut 5s linear forwards, moveDown 5s linear forwards;
  animation-play-state: paused;
  position: relative;
}
.poop:hover {
  animation-play-state: running;
}

/* 淡出动画 */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 向下移动动画 */
@keyframes moveDown {
  from { transform: translateY(0); }
  to { transform: translateY(200px); }
}

注意事项 #

• 若用top/margin-top实现位移，需给.poop设置position: relative或absolute，否则静态定位元素的top属性无效；用transform: translateY()无需额外设置定位，兼容性也更好。
• 多动画同时运行时，必须保证时长、缓动函数完全一致，否则会出现不同步问题。

内容的提问来源于stack exchange，提问作者Thomas Ventura