Как потрясти изображение при наведении и вовремя - PullRequest
Новая
       9

Как потрясти изображение при наведении и вовремя

0 голосов
/ 30 мая 2018

Я хочу потрясти изображение, когда пользователь находится над изображением (эффект наведения) и каждые 5 секунд.Мой код: 

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

/*
.opona {
  -webkit-animation-name: shake;
  -webkit-animation-duration: 5s;
  -webkit-animation-delay: 0.82s;
}
*/

@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="opona">
  <img src="https://www.firestonetire.com/content/dam/bridgestone/consumer/fst/tire-images/Firehawk%20AS/FST_Firehawk_AS.jpg/_jcr_content/renditions/original" alt="" width="50px">
</div>

Когда я удаляю комментарий из .opona, эффект не работает.Спасибо за любую помощь.

1 Ответ

0 голосов
/ 30 мая 2018

В этом случае вы хотите, чтобы animation длился 10.82s, где «движущаяся» часть занимает всего 0,82 , поэтому оставляется разрыв 10 с до повторения.Чтобы сделать это, все, что вам нужно сделать, это немного настроить с определенными @keyframes % с.

0,82 / 10,82 = ~ 7,6% , то есть "перемещение " части занимает только 7,6% от анимации длительности .

Так что для обновления % s просто умножьте текущее значения по 0,076: 

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

@keyframes shake {
  .76%, 6.84% {transform: translate3d(-1px, 0, 0)}
  1.52%, 6.08% {transform: translate3d(2px, 0, 0)}
  2.28%, 3.8%, 5.32% {transform: translate3d(-4px, 0, 0)}
  3.04%, 4.56% {transform: translate3d(4px, 0, 0)}
}
<div class="opona">
  <img src="https://www.firestonetire.com/content/dam/bridgestone/consumer/fst/tire-images/Firehawk%20AS/FST_Firehawk_AS.jpg/_jcr_content/renditions/original" alt="" width="50px">
</div>
...