如何移动到CSS3动画中的某个关键帧？

Question

假设我们有一个像这样的动画: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;
}

当我向后或向前按时,我想进入下一个或上一个动画状态.可以有多个对象,我想同时切换它们的动画状态.

它是否可能通过CSS或CSS + JS,或者它可能更容易我只是在pure-JS中重写我的代码？(目前我不喜欢这个想法,因为我有很多动画属性,CSS让我更容易)

Answer 1

或许你已经在 CSS+JS 中找到了答案

请参考旧帖

在同一篇文章中的小提琴上Fiddle

只有这里的 CSS 是Fiddle我用属性进行调整的:hover，

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

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

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



@-webkit-keyframes someani2 {
    0%,100% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
}

@-moz-keyframes someani2 {
    0%,100% {
        width: 100px;
    }
    50% {
        width: 200px;
    }
}

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



.animating {
    width: 200px;
    height: 200px;
    background-color: red;
    -webkit-animation: someanimation 5s infinite;
    -moz-animation: someanimation 5s infinite;
    animation: someanimation 5s infinite;
}
.animating:hover{
    color:#f60;
    -webkit-animation: someani2 6s 1;
    -moz-animation: someani2 6s 1;
    animation: someani2 6s 1;
}

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

它会更改悬停时的动画，就像后退按钮一样。

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