Question

我有以下功能可以增加圆圈的大小，但不是在缩放后重新开始，我想缩小回原始大小。向后。所以当它达到2级时，它应该逐渐回到1。

我该如何做到这一点？

function animateCircles() {
  var circles = document.getElementsByClassName('circle')
  setTimeout(function () {
    for(i=0;i<circles.length;i++) {
      circles[i].animate([
        // keyframes
        { transform: 'translateY(0px)' }, 
        { transform: 'scale(2)' }
      ], { 
        // timing options
        duration: 2000,
        iterations: Infinity
      });
    }
  },0)
  setTimeout(function () {
    for(i=0;i<circles.length;i++) {
      circles[i].animate([
        // keyframes
        { transform: 'translateY(0px)' }, 
        { transform: 'scale(1.5)' }
      ], { 
        // timing options
        duration: 2000,
        iterations: Infinity
      });
    }
  },2000)
}

Answer 1

只需在第一个动画中添加另一个关键帧（并相应地调整时间）：

＆＃13;

function animateCircles() {
  var circles = document.getElementsByClassName('circle')
  setTimeout(function() {
    for (i = 0; i < circles.length; i++) {
      circles[i].animate([
        // keyframes
        {
          transform: 'translateY(0px)'
        }, {
          transform: 'scale(2)'
        }, {
          transform: 'scale(1)'
        }
      ], {
        // timing options
        duration: 2000,
        iterations: Infinity
      });
    }
  }, 0)

}
animateCircles();

＆＃13;

.circle {
  background-color: #F00;
  border-radius: 50%;
  width: 75px;
  height: 75px;
}

＆＃13;

<div class="circle"></div>

＆＃13;

如何从按比例放大的尺寸缩小元素？

1 个答案: