Поворот / отскок изображения от центральной оси

Question

Я создал следующее на CodePen

HTML

  <div class="demo-container clocks active bounce">
      <section class="seconds-container">
        <section class="seconds"></section>
      </section>
    </article>
  </div>

CSS

body {
  margin: 0;
}

.demo-container.clocks {
  background: #3cd19e;
  padding: 0;
  width: 500px;
  height: 548px;
  margin: 0;
  overflow: hidden;
}

.hours-container {
  animation: rotate 43200s infinite linear;
}

.linear {
  .minutes-container {
    animation: rotate 3600s infinite linear;
  }
  .seconds-container {
    animation: rotate 60s infinite linear;
  }
}

.steps {
  .minutes-container {
    animation: rotate 3600s infinite steps(60);
  }
  .seconds-container {
    animation: rotate 60s infinite steps(60);
  }
}

.local.steps {
  .minutes-container {
    animation: none;
  }
}

.bounce {
  .minutes-container {
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
  }
  .seconds-container {
    transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
  }
}

.seconds {
  background: url(https://svgur.com/i/Hmu.svg);
  width: 500px;
  height: 548px;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50%;
  z-index: 8;
  animation: rotate 60s infinite steps(60);
}

@keyframes rotate {
  100% {
    /*transform: rotateZ(360deg);*/
  }
}


.seconds-container {
  transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}

JS

/*
 *  Main function to set the clock times
 */
(function() {
  // Start the seconds container moving
  moveSecondHands();
})();

/*
 * Move the second containers
 */
function moveSecondHands() {
  var containers = document.querySelectorAll('.bounce .seconds-container');
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 6;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 1000);
  for (var i = 0; i < containers.length; i++) {
    // Add in a little delay to make them feel more natural
    var randomOffset = Math.floor(Math.random() * (100 - 10 + 1)) + 10;
    containers[i].style.transitionDelay = '0.0'+ randomOffset +'s';
  }
}

В основном я хочу, чтобы изображение поворачивалось на 360 и имело этот эффект отскока. Просто не могу понять, как сохранить изображение в том же положении, чтобы поворот происходил из центральной точки (изображение остается в том же месте)

Есть идеи?

---

Поэтому мне нужно объединить animation: rotate 60s infinite steps(60); с эффектом отскока, показанным в коде ручки.

Answer 1

.seconds {
    background: url(https://svgur.com/i/Hmu.svg);
    width: 1000px;
    height: 1097px;
    position: relative;
    left: 0;
    top: 0;
    transform-origin: 50%;
    z-index: 8;
    animation: rotate 2s infinite;
}

@keyframes rotate {
    from {
        transform: scale(1);
    }
    75% {
        transform: scale(0.98);
    }
    50% {
        transform: scale(0.95);
    }
    25% {
        transform: scale(0.98);
    }`enter code here`
    to {
        transform: scale(1);
    }
}