如何移动到CSS3动画中的某个关键帧？ [英] How to move to the certain keyframe in CSS3 animation?

问题描述

假设我们有这样的动画： http://jsfiddle.net/utterstep/JPDwC/

Let's say we have an animation like here: http://jsfiddle.net/utterstep/JPDwC/

版面：

<div>back</div>
<div class="animating"></div>
<div>forward</div>

和对应的CSS：

@keyframes someanimation {
    0% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 100px;
    }
}

.animating {
    width: 200px;
    height: 200px;
    background-color: red;
    animation: someanimation 5s infinite;
}

我要转到下一个或上一个动画状态， em>返回或转发。可以有多个对象，我想同时切换他们的动画状态。

And I want to go to the next or previous animation state when I press back or forward. There can be more than one object and I would like to switch their animation states at the same time.

它可能通过CSS或CSS + JS，或者它可能它会更容易我只是重写我的代码在纯JS？ （目前我不喜欢这个想法，因为我有很多属性为动画和CSS使它更容易为我）

Is it someway possible via CSS or CSS+JS, or it maybe it will be easier for me just to rewrite my code in pure-JS? (currently I don't like this idea because I have a lot of properties to animate and CSS makes it much more easier for me)

推荐答案

也许你在CSS + JS中有答案

Perhaps you have got the answer in CSS+JS

请参阅旧帖

在同一帖子上的小部件 小提琴

Here on fiddle from the same post Fiddle

只有这里的CSS才是 小提琴 我调整了：hover 属性，

And with CSS only here is the Fiddle I have tweaked with :hover property,

它会改变悬停时的动画，就像后退按钮

it changes the animation on hover, just like back button

我希望这将解决你的目的..

I hope this will solve your purpose..

这篇关于如何移动到CSS3动画中的某个关键帧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！