更改动画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);
  }
}

所以我在无限有一个rotationning图像。现在我想改变与JS的旋转速度。我想：

So i have an rotationning 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 change the speed, but the animation reboot to framekey 0% (the first), but i juste want the animation continue like nothing happen, i don't want back to 0%.

我怎样才能做到这一点？

How can i do that?

THX。

推荐答案

这是一个非常艰难的过程这样做。目前，改变动画中期动画的唯一方法是使用的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 的速度，你的情况这看起来像的 这个演示 ，但它仍然是远远pretty

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

编辑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

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