анимация вращения css3 - начало вращения, затем остановка на кадре - PullRequest
Новая
       5

анимация вращения css3 - начало вращения, затем остановка на кадре

0 голосов
/ 18 октября 2019

Я попытался создать функцию, которая будет запускать вращение - затем заменить изображение, а затем остановить вращение.

Когда я удаляю класс вращения, - он трясется - как мне остановить вращение, но на кадре. 

setTimeout(function() {
  $('.image').addClass("spinner");
}, 400);
setTimeout(function() {
  $('.image').removeClass("spinner");
}, 1500);
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

@-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);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

базовый код http://jsfiddle.net/m6z4jgdq/

текущий пример http://jsfiddle.net/m6z4jgdq/2/

1 Ответ

1 голос
/ 18 октября 2019

Вы можете заставить ваше изображение вращаться только один раз, удалив счетчик итераций infinite в вашей CSS-анимации, чтобы он запускался только один раз: 

.spinner {
  -webkit-animation: spin 1s linear;
  -moz-animation: spin 1s linear;
  animation: spin 1s linear;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards; 
  animation-delay: 400ms; /* start animation after 400ms */
}

Таким образом, нет необходимости останавливать его вручнуюот вращения, так как он естественным образом остановится после поворота на 360 ° (удаляя появившееся «толчок»). Вы также можете добавить animation-delay, если хотите запустить анимацию после 400ms вместо использования JS и setTimeout: 

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 1s linear;
  -moz-animation: spin 1s linear;
  animation: spin 1s linear;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}

@-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);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Вы можете указать количество итераций (т. Е. Сколько раз ваша анимация повторяется), указав его в стиле animate CSS. Например, если вы хотите, чтобы он вращался три раза, вы можете сделать: 

animation: spin 1s linear 3;


.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 1s linear 3;
  -moz-animation: spin 1s linear 3;
  animation: spin 1s linear 3;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}

@-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);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Если вы хотите задержку между каждым вращением, вам нужно указать ключевые кадры, которые ничего не делают, и увеличить время анимации так, чтобы оно составляло дозадержка также: 

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 2s linear 3;
  -moz-animation: spin 2s linear 3;
  animation: spin 2s linear 3;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}

@-moz-keyframes spin {
  50%, 100% { /* 50% of 2secs = 1sec, so 1 sec delay between rot */
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  50%, 100% { /* 50% of 2secs = 1sec, so 1 sec delay between rot */
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  50%, 100% { /* 50% of 2secs = 1sec, so 1 sec delay between rot */
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
...