如何更改CSS动画的速度?

问题描述

我有动画:

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改变旋转速度.我试过了:

I have an rotating image at infinite. Now I want change the speed of rotation with JS. I tried:

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

持续时间改变了速度，但是动画重新启动为0％的帧关键帧(第一个)，但是我只是希望动画像什么都没有发生一样继续；我不想回到0％.

The duration changes the speed, but the animation reboot to framekey 0% (the first), but I just want the animation continue like nothing happened; I don't want to go back to 0%.

我该怎么做?

推荐答案

这样做非常困难.当前，更改动画中间动画的唯一方法是使用setInterval近似当前关键帧的百分比，保存该关键帧的属性，更新动画(在您的情况下只是速度)，然后应用新版本的从保存点开始的动画.我在为CSS Tricks写的文章中创建了一个类似的示例，称为控制CSS动画和放大器. ;使用Javascript进行转换

It's a very difficult process to do so. Currently the only way to change an animation mid-animation is to use a setInterval to approximate the current keyframes percentage, save the properties of that keyframe, update the animation (in your case just the speed) then apply the new version of the animation starting from the saved point. I created a similar example in the article I wrote for CSS Tricks called Controlling CSS Animations & Transitions with Javascript

如文章所述，在您的情况下，更改animationIteration的速度会更容易，就像 此演示 ，但距离漂亮

As the article described, it'd be easier to change the speed on animationIteration, in your case that would look like this demo, but it is still far from pretty

 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();

目前，我们不能简单地使用不同的计时功能重新启动动画(即使您像Michael所说的那样暂停并再次运行它).结果，您要么必须使用setInterval(这会带来更大的延迟)，要么使用更改后的值克隆元素.有关我在演示中使用的方法的更多信息，我在所有添加的javascript中添加了注释

At the moment we cannot simply restart the animation with a different timing function (even if you pause it and run it again like Michael said). As a result you either have to use a setInterval (which gives a higher delay) or clone the element with the changed values. For more information on the approach I used look at the demo, I added comments to all the javascript I added

编辑(基于您在评论中链接的小提琴)

EDIT based on your linked fiddle in comments

由于您要模拟轮盘赌，因此根本不需要使用JavaScript！只需更改您的rotation动画即可随着时间变化速度(:> 这是一个粗略的版本 > 操作方法，但是您应该添加更多关键帧以使其看起来比当前行为更平滑

Since you're trying to simulate a roulette, you don't need to use javascript at all! Simply change your rotation animation to change speed over time (: Here's an rough version of how you'd do so, but you should add more keyframes to make it appear more smooth than it currently behaves

@-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

由于您显然需要具有随机的结束位置并可能多次运行，因此您可以执行 某些操作 这样更简单，仅使用CSS转换，并且非常有用

Since you need apparently need have a random ending position and likely run it multiple times you can do something like this which is much simpler, only uses CSS transforms, and incredibly useful

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 就像我在此项目中所做的一样，使其更具交互性/动态性

This isn't fully relevant or irrelevant, but you can do very similar things using GSAP like I did in this project to make it more interactive/dynamic

这篇关于如何更改CSS动画的速度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！