Как увеличить интенсивность эффекта встряхивания по прошествии времени

#javascript #html #css

#javascript #HTML #css

Вопрос:

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

 #BplusBT{
    position: relative;
    width: 40px;
    height: 40px;
    background-color: blue;
}
.ballepacioH{
    background-repeat: no-repeat;
    background-size: contain;
    width: 4px;
    height: 4px;
    list-style-type: none;
}

 <div class='column'>
    <li id='BplusBT'></li>
    <li class='ballepacioH'></li>
    <li id='BplusBT'></li>
    <li class='ballepacioH'></li>
    <li id='BplusBT'></li>
</div>

 var div = document.createElement('div');
div.innerHTML = htmlLeyenda;
sym.$("recuadro_esferas").append(div);

var circles = document.querySelectorAll("#BplusBT");

for (var i = 0; i < 3; i  ) {
    var circle = circles[i];

    circles.keyframes = [{
        transform: "translate("   "0px, 2px)"
    }, {
        transform: "translate("   "0px, -2px)"
    },{
       transform: "translate("   "0px, 0px)"
    }];

    circle.animProps = {
        duration: 10   5 * i,
        easing: "ease-out",
        iterations: Infinity
    }

    var animationPlayer = circle.animate(circle.keyframes, circle.animProps);
}

1. То, что я пытаюсь сделать, это то, что анимация начинается с того, что квадрат полностью неподвижен, а затем он начинает очень медленно трястись и увеличивать скорость все больше и больше, пока он не начнет трястись очень быстро

Ответ №1:

На самом деле это довольно просто, просто определите несколько animation состояний и поиграйте с ними % , а затем разделите их на группы с одинаковой % разницей между начальным и конечным состояниями. В приведенном ниже примере есть три группы с 5% , 3% и 1% разница между состояниями, что означает, что 5% преобразования будут занимать как самое длинное, так и 1% самое короткое время анимации:

 .ballepacioH {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: blue;
  list-style: none;
  animation: shake 2s infinite;
}

@keyframes shake {
  0%, 49% {transform: initial} /* 2s * 0.49 = 0.98s of idle time */
  /* 5% apart / starts slow */
  49.01%, 54% {transform: translate(2px, 2px)}
  59.01%, 64% {transform: translate(-2px, -2px)}
  69.01%, 74% {transform: translate(2px, 2px)}
  79.01%, 84% {transform: translate(-2px, -2px)}
  /* 3% apart */
  84.01%, 87% {transform: translate(2px, 2px)}
  87.01%, 90% {transform: translate(-2px, -2px)}
  90.01%, 93% {transform: translate(2px, 2px)}
  93.01%, 96% {transform: translate(-2px, -2px)}
  /* 1% apart / ends fast */
  96.01%, 97% {transform: translate(2px, 2px)}
  97.01%, 98% {transform: translate(-2px, -2px)}
  98.01%, 99% {transform: translate(2px, 2px)}
  99.01%, 100% {transform: translate(-2px, -2px)}
}

 <div class='column'>
  <li class='ballepacioH'></li>
</div>

Примечание: идентификаторы должны быть уникальными, то есть не использовать один и тот же идентификатор для нескольких элементов.