.flip-button-icon - CSS - заставить его трястись при загрузке страницы

Question

Я новичок в CSS / Divi, но сделал Google и провел последние 2 с лишним часа, пытаясь это сделать ... поэтому, пожалуйста, немного расслабьтесь. =)

Рад дать щедрому помощнику время, возможно, сэкономить мне полдня, разбираясь с этим ...

Кнопка CTA имеет этот значок >>, который я бы хотел, чтобы он встряхнуть при загрузке страницы. (Рад, что он продолжает трястись при наведении курсора мыши)

Текущий код (работает при наведении курсора, но не так, как кажется)

.flip-button-icon:hover:after 
{
  transition: transform 1000ms;
}
.flip-button-icon:hover:after 
{
  transform: translate(5px);
}

// Попытка сделать эту работу, но не удалось ..

    0% { transform: translate(0px); }
   25% { transform: translate(5px); }
   50% { transform: translate(0px); }
   75% { transform: translate(5px); }
  100% { transform: translate(0px); }

В любом случае, вы поймете идею .... смеется

Answer 1

Посмотрите на этот пример, который я только что создал: (нашел хороший анимационный коктейль в сети)

.flip-button-icon:hover {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

<div class="flip-button-icon" style="background-color:#f00;height:20px;width:20px;"></div>

Если вы хотите, чтобы ваша кнопка тряслась при загрузке страницы, вам придется использовать JavaScript.

Answer 2

Если вы еще этого не сделали, я бы порекомендовал ознакомиться с CSS анимациями , чтобы получить хорошее общее представление об этой области.

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

Редактировать: исправлен код, изолирующий внутренний текст кнопки и только анимирующий его. Вы можете быстро проверить это здесь: https://codepen.io/Cursa/pen/qBdbjaX

<button>
  <div class="shakyText">>></div>
</button>

.shakyText
{
  animation: shake 1s infinite;
}

@keyframes shake {
  0% { transform: translate(0px); }
  25% { transform: translate(5px); }
  50% { transform: translate(0px); }
  75% { transform: translate(5px); }
  100% { transform: translate(0px); }
}