点击PROCEED按钮时向下抖动问题求助（附完整代码）

按钮点击后向下抖动的核心原因是动画前后的transform属性不一致：

• 按钮初始样式设置了transform: translateY(-2rem)
• buttonFadeIn动画结束后，通过animation-fill-mode: forwards将按钮transform固定为translateY(-4rem)
• 点击后添加的btnfadeout类使用了通用的fadeOut动画，该动画仅修改opacity，未指定transform值。动画启动时，按钮transform会从translateY(-4rem)跳回初始的translateY(-2rem)，表现为向下抖动。

直接修改btnfadeout类，使用你已定义好的buttonFadeOut动画（该动画已维持了正确的transform位置）：

.btnfadeout {
  animation: buttonFadeOut 1.5s forwards;
}

若想让通用fadeOut动画适配所有元素且不改变它们的transform，也可以修改fadeOut关键帧：

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: inherit;
  }

  to {
    opacity: 0;
    transform: inherit;
  }
}

JavaScript #

const button = document.querySelector(".btn")
const prompts = document.querySelectorAll(".prompt")

button.addEventListener("click", function() {

  setTimeout(() => {
    button.classList.add("btnfadeout");
  }, 1200);

  setTimeout(() => {
    prompts.forEach(prompt => {
      prompt.classList.add("fadeout");
    })
  }, 800)
})

CSS #

@font-face {
  font-family: 'InconsolataEB';
  src: url(Inconsolata/static/Inconsolata-ExtraBold.ttf);
}

body {
  background-color: #030603;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  color: #42d999;
  font-family: 'InconsolataEB';
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}

#typewriter1 {
  display: inline-block;
  transform: translateY(-10rem);
}

#typewriter2 {
  display: inline-block;
  transform: translateY(-10rem);
}

#prompt1 {
  font-size: 2rem;
  text-align: center;
  font-family: 'InconsolataEB';
  text-shadow: 0 0 2px #59e9ad;
  width: 100%;
  margin: 1rem 0;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  animation: typing 2s steps(20);
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

#prompt2 {
  font-size: 2rem;
  text-align: center;
  font-family: 'InconsolataEB';
  text-shadow: 0 0 2px #59e9ad;
  width: 100%;
  margin: 1rem 0;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  animation: typing 2.5s steps(17);
  animation-delay: 4.5s;
  animation-fill-mode: forwards;
}

.btn {
  margin-top: 1.5rem;
  padding: 2.8rem;
  border: 2px solid #b6eed7;
  background-color: transparent;
  color: #42d999;
  text-shadow: 0 0 8px #59e9ad;
  font-family: 'InconsolataEB';
  font-size: 3rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2rem);
  animation: buttonFadeIn 1s ease-out forwards 8s;
  transition: 325ms;
}

.btn:hover {
  color: #5eecb1;
  text-shadow: 0 0 5px #6af3ba,
    0 0 45px #6af3ba
}

.btn:active {
  transition: 20ms;
  color: #5eec88;
  text-shadow: 0 0 5px #6af388,
    0 0 45px #6af388;
  border: 2px solid #b6eeb7;
}

/* 修改后的按钮淡出类 */
.btnfadeout {
  animation: buttonFadeOut 1.5s forwards;
}

.fadeout {
  animation: fadeOut 1.5s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes buttonFadeOut {
  0% {
    opacity: 1;
    transform: translateY(-4rem);
  }

  100% {
    opacity: 0;
    transform: translateY(-4rem);
  }
}

@keyframes buttonFadeIn {
  to {
    opacity: 1;
    transform: translateY(-4rem);
  }
}

@keyframes typing {
  from {
    width: 0;
    opacity: 1;
  }

  to {
    width: 100%;
    opacity: 1;
  }
}

HTML #

<div class="container">
  <div id="typewriter1" class="prompt">
    <p id="prompt1">An interface awaits.</p>
  </div>
  <div id="typewriter2" class="prompt">
    <p id="prompt2">Will you proceed?</p>
  </div>
  <button class="btn">[ PROCEED ]</button>
</div>

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