Блог

Главная - Вопросы по программированию - Как запретить CSS-анимации перемещать остальную часть моей страницы?

Как запретить CSS-анимации перемещать остальную часть моей страницы?

#css #css-animations

#css #css-анимации

Вопрос:

Я добавил анимацию к кнопке, используя ключевые кадры. Предполагается, что анимация приведет к пульсирующему эффекту. Анимация, похоже, работает правильно, но когда я добавляю текст под ней, анимация заставляет текст также перемещаться.

Вот скриншот анимации введите описание изображения здесь

«Пульсирующий» текст перемещается вверх и вниз по мере увеличения и уменьшения самой кнопки.

Вот мой связанный 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;
}

Есть идеи относительно того, как я могу предотвратить перемещение текста во время нажатия кнопки?

Ответ №1:

Я полагаю, что мне удалось выполнить то, что вы хотите, используя масштаб вместо заполнения в ваших ключевых кадрах:

 .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 в a 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>

Метки: