改变动画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改变旋转的速度。我尝试了：
$（'img'）。css（'animation-duration'，'2s'）;
持续时间会改变速度，但是动画重新启动到framekey 0％只是想让动画继续没有发生什么;我不想回到0％。
我该怎么办？
这是一个非常困难的过程。目前，更改动画中间动画的唯一方法是使用 setInterval 来近似当前关键帧百分比，保存该关键帧的属性，更新动画（在您的情况下只是速度），然后从保存点开始应用新版本的动画。我在为CSS技巧写的文章中创建了一个类似的示例，名为控制CSS动画&使用JavaScript的转换
如文章所述，在 animationIteration ，在您的情况下，看起来像 此演示 ，但它仍然远离漂亮
var pfx = [webkit，moz，MS，o，]，
rotate = $（'。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 = rotating.length; i
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（）;
rotate = $（'。rotate'）;
listen（）;
prevent = true;
}
else if（$（'＃faster'）。is（'：checked'）&&& $ b prevent = false;
var el = $（this），
newOne = el.clone（true）
.css（{'animation'：'rotate 1.5s linear infinite'} ）;
el.before（newOne）;
$（。+ el.attr（class）+：last）remove
rotate = $（'。rotate'）;
listen（）;
}
}）;
}
}
listen（）;
目前，我们无法使用不同的计时功能重新启动动画（即使您暂停运行它再次像迈克尔说）。因此，您必须使用 setInterval （这会产生更高的延迟），或者使用更改的值克隆元素。有关我使用的方法的详细信息，我在演示中添加了评论，我添加了所有的JavaScript我添加
编辑基于您的链接小提琴在评论中
由于您试图模拟轮盘赌，您不需要使用JavaScript！只需更改旋转动画即可随时间改变速度（： 这里粗糙版本 ，但您应该添加更多关键帧，使其看起来比当前行为更流畅
@ - 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：旋转（4780deg）;}
}
EDIT 2 / p>
因为你需要显然需要一个随机的结束位置，并可能多次运行，你可以做 类似这样的 。这更简单，只使用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
$ b b
这不完全相关或不相关，但您可以使用 GSAP （例如我在这个项目中做了，使其更具互动性/动态性
I have animation:
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);
}
}
I have an rotating image at infinite. Now I want change the speed of rotation with JS. I tried:
$('img').css('animation-duration', '2s');
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%.
How can I do that?
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
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();
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
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); }
}
EDIT 2
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
);
}
and the CSS
img { -webkit-transition: -webkit-transform 2s ease-out; }
Edit 3
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屋！
