Question

我正在制作一个正方形的动画，该动画应该在从无晃动到大晃动的时间流逝时增加其晃动，现在我有了这段代码，但是它无法正常工作。

#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);
}

Answer 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>

注意： Id的是唯一的，因此 elements 不应/不必共享相同的 id < / em>。

如何随着时间的流逝增加震动效果的强度

1 个答案: