jquery - 如何更改 CSS 动画的速度？

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 根据您在评论中链接的 fiddle

由于您正在尝试模拟轮盘赌，因此根本不需要使用 javascript!只需更改您的旋转动画以随时间改变速度(: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); }
}

编辑 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使其更具交互性/动态性