javascript - 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 实现，或者只用纯 JS 重写代码对我来说可能会更容易？ (目前我不喜欢这个想法，因为我有很多属性要设置动画，而 CSS 使它对我来说更容易)

Answer 1

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

请引用Old Post

来自同一篇文章的 fiddle 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>

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

我希望这能解决您的问题..