Как повторить спин?

Question

Ну, это мой код, он работает хорошо, я так хочу, но это всего лишь 50% от того, что я хочу.

.image {
  position: absolute;
  top: 44%;
  left: 21%;
  width: 82px;
  height: 82px;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear repeat;
  -moz-animation-iteration-count: 4s;
  animation: spin 0.4s linear 2;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<img class="image" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" />

И когда он начнет вращаться, я хочу, чтобы он подождал 4 секунды, а затем повторил код много раз. Я не хочу менять animation:spin 0.4s linear 2, изображение должно вращаться 2 раза за 0,4 с без задержки после первого вращения. Если есть лучший код, то почему бы не изменить его: D

заранее спасибо.

Answer 1

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

PS: я удалил --webkit-, --moz- для простоты, для максимальной компиляции вы можете перевести animation и keyframes для разных браузеров.

.image {
  position: absolute;
  top: 44%;
  left: 21%;
  width: 82px;
  height: 82px;
  margin: -60px 0 0 -60px;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  16% {
    transform: rotate(720deg);
  }
  100% {
    transform: rotate(720deg);
  }
}

<img class="image" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" />

Я установил продолжительность анимации на 5 секунд. В течение первых 0,8 секунд (= 5 с * 0,16) изображение вращается на 720 градусов (вращается 2 раза вокруг своего центра). Затем ждет 4,2 секунды (если вам нужно подождать ровно 4 секунды, вам нужно будет быстро подсчитать, чтобы немного скорректировать числа).