如何防止 CSS 动画移动我页面的其余部分?

How to prevent CSS animations from moving the rest of my page?

我使用关键帧向按钮添加了动画。动画应该会产生脉冲效果。动画似乎工作正常,但当我在其下方添加文本时,动画也会导致文本移动。

这是动画截图

'pulsing' 文本随着按钮本身的增大和缩小而上下移动。

这是我的相关 CSS:

 **Button num 4 **/
#block-yui_3_17_2_1_1614371999436_9067 .sqs-block-button-element {
  position: relative !important;
  color: black !important;
  background-color: orange !important;
  box-shadow: 5px 10px green;
  animation: demoButtonPulse 1s ease-in-out infinite;
}

@keyframes demoButtonPulse {
    0% {padding: 1.3rem 2.171rem;;
          background: red;}
    50% {padding: 1.43rem 2.3881rem;;
          background: green;
        }
    100% {padding: 1.3rem 2.171rem;;
              background: red;}
  }

#block-yui_3_17_2_1_1614371999436_9067 .sqs-block-button-element:hover {
  color: white !important;
  background-color: black !important;
  border-color: green;
  box-shadow: 5px 10px orange;
}

知道如何在按钮闪烁时防止文本移动吗?

我相信我能够在关键帧中使用缩放而不是填充来完成您想要的:

.sqs-block-button-element{
  position: relative !important;
  padding: 10px;
  margin-bottom: 2rem;
  color: black !important;
  background-color: orange !important;
  box-shadow: 5px 10px green;
  animation: demoButtonPulse 1s ease-in-out infinite;
}

@keyframes demoButtonPulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

.sqs-block-button-element:hover {
  color: white !important;
  background-color: black !important;
  border-color: green;
  box-shadow: 5px 10px orange;
}
<main>
<button type="submit" class="sqs-block-button-element">
  Call to Action
</button>
    <div>pulsing</div>
</main>

另一个解决方案是将 button 包裹在 div 中并给 div 一个固定的高度:

.sqs-block-button-element{
  position: relative !important;
  padding: 10px;
  margin-bottom: 2rem;
  color: black !important;
  background-color: orange !important;
  box-shadow: 5px 10px green;
  animation: demoButtonPulse 1s ease-in-out infinite;
}

.button-height {
  height: 100px;
}

@keyframes demoButtonPulse {
    0% {padding: 1.3rem 2.171rem;;
          background: red;}
    50% {padding: 1.43rem 2.3881rem;;
          background: green;
        }
    100% {padding: 1.3rem 2.171rem;;
              background: red;}
  }

/* @keyframes demoButtonPulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  } */

.sqs-block-button-element:hover {
  color: white !important;
  background-color: black !important;
  border-color: green;
  box-shadow: 5px 10px orange;
}
<main>
  <div class="button-height">
<button type="submit" class="sqs-block-button-element">
  Call to Action
</button>
    </div>
    <div>pulsing</div>
</main>