Изменить скорость анимации CSS3?

Question

У меня есть анимации:

img.rotate { 
    animation-name: rotate; 
    animation-duration: 1.5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 

@keyframes rotate { 
    from { 
    transform: rotate(0deg); 
    } 
    to { 
    transform: rotate(360deg); 
    } 
} 

У меня есть вращающееся изображение на бесконечности. Теперь я хочу изменить скорость вращения с помощью JS. Я пробовал:

$('img').css('animation-duration', '2s'); 

Продолжительность изменяет скорость, но анимация перезагрузки в framekey 0% (первый), но я просто хочу, анимация по-прежнему, как ничего не произошло; Я не хочу возвращаться к 0%.

Как я могу это сделать?

Answer 1

Это очень сложный процесс для этого. В настоящее время единственным способом изменить анимацию анимации является использование setInterval, чтобы приблизить текущий процент ключевых кадров, сохранить свойства этого ключевого кадра, обновить анимацию (в вашем случае только скорость), затем применить новую версию анимации, начиная с из сохраненной точки. Я создал подобный пример в этой статье я написал для CSS хитрости называется Controlling CSS Animations & Transitions with Javascript

Как статье описал, было бы проще изменить скорость на animationIteration, в вашем случае, будет выглядеть this demo, но это еще далеко от довольно

var pfx = ["webkit", "moz", "MS", "o", ""], 
    rotates = $('.rotate'), 
    prevent = false; 

function PrefixedEvent(element, type, callback) { 
    for (var p = 0; p < pfx.length; p++) { 
     if (!pfx[p]) type = type.toLowerCase(); 
     element.addEventListener(pfx[p]+type, callback, false); 
    } 
} 

function listen() { 
    for(var i = 0, j = rotates.length; i < j; i ++) { 
     PrefixedEvent(rotates[i], "AnimationIteration", function() { 
      if(!$('#faster').is(':checked') && !prevent) { 
       var el = $(this), 
        newOne = el.clone(true) 
          .css({'animation':'rotate 2s linear infinite'}); 
       el.before(newOne);   
       $("." + el.attr("class") + ":last").remove(); 
       rotates = $('.rotate'); 
       listen(); 
       prevent = true; 
      } 
      else if($('#faster').is(':checked') && prevent) { 
       prevent = false; 
       var el = $(this), 
        newOne = el.clone(true) 
          .css({'animation':'rotate 1.5s linear infinite'}); 
       el.before(newOne); 
       $("." + el.attr("class") + ":last").remove(); 
       rotates = $('.rotate'); 
       listen(); 
      } 
     }); 
    } 
} 
listen(); 

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

EDIT основанным на связанную скрипке в комментариях

Поскольку вы пытаетесь имитировать рулетку, вам не нужно использовать javascript вообще! Просто измените rotation анимацию для изменения скорости с течением времени (: Here's an rough version того, как вы могли бы сделать это, но вы должны добавить несколько ключевых кадров, чтобы сделать его более гладким, чем в настоящее время он ведет себя

@-webkit-keyframes rotate { 
    0% { -webkit-transform: rotate( 0deg); } 
    30% { -webkit-transform: rotate(2600deg); } 
    60% { -webkit-transform: rotate(4000deg); } 
    80% { -webkit-transform: rotate(4500deg); } 
    100% { -webkit-transform: rotate(4780deg); } 
} 

EDIT 2

Так как вам нужно, очевидно, нужно иметь случайное положение окончания и, вероятно, запустить его несколько раз, вы можете сделать something like this что гораздо проще, использует только CSS трансформирует и невероятно полезный

var img = document.querySelector('img'); 
img.addEventListener('click', onClick, false);  
var deg = 0; 

function onClick() { 
    this.removeAttribute('style');   
    deg += 5 * Math.abs(Math.round(Math.random() * 500));   
    var css = '-webkit-transform: rotate(' + deg + 'deg);';   
    this.setAttribute(
     'style', css 
    ); 
} 

и CSS

img { -webkit-transition: -webkit-transform 2s ease-out; } 

Редактировать 3

Это не полностью соответствующие или не имеет значения, но вы можете сделать очень похожие вещи, используя GSAP как I did in this project, чтобы сделать его более интерактивным/динамический

Answer 2

Вы можете сделать это, установив обертку и вращая ее против часовой стрелки.

CSS

.wrapper, .inner { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    -webkit-animation-name: rotate; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    animation-name: rotate; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
.wrapper { 
    left: 40px; 
    top: 40px; 
    -webkit-animation-duration: 2.5s; 
    -webkit-animation-play-state: paused; 
    -webkit-animation-direction: reverse; 
    animation-duration: 2.5s; 
    animation-play-state: paused; 
    animation-direction: reverse; 
} 
.wrapper:hover { 
    -webkit-animation-play-state: running; 
    animation-play-state: running; 
} 
.inner { 
    display: block; 
    background-color: red; 
    -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
} 
@keyframes rotate { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}  
@-webkit-keyframes rotate { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
}  

demo

(наведет квадрат, чтобы замедлить его)