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

当我按下back或forward时，我想进入下一个或上一个动画状态。可以有多个对象，我想同时切换它们的动画状态。

是否有可能通过 CSS 或 CSS + JS，或者我用纯 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>

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

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