改变动画CSS3的速度？ [英] Change speed of animation CSS3?

问题描述

我有动画：

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

持续时间会改变速度，但是动画重新启动到framekey 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技巧写的文章中创建了一个类似的示例，名为控制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();

目前我们无法使用不同的计时功能重新启动动画（即使您暂停运行它再次像迈克尔说）。因此，您必须使用 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！只需更改旋转动画即可随时间改变速度（： 这是一个粗略的版本 ，但您应该添加更多的关键帧，使其显得比目前的行为更加顺畅

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

由于您需要显示一个随机结束位置，并可能多次运行，您可以执行 类似这样的东西 更简单，只使用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

这篇关于改变动画CSS3的速度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！