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

【问题标题】：How to move to the certain keyframe in CSS3 animation?如何移动到 CSS3 动画中的某个关键帧？
【发布时间】：2019-12-26 19:19:25
【问题描述】：

假设我们有一个像这样的动画：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 让我更容易做到）

【问题讨论】：

“上一个”和“下一个”动画状态是什么意思？你有任何播放/暂停按钮来切换动画状态吗？
试试this或This
@Passerby 抱歉含糊不清。我想知道我是否以某种方式跳转到下一个定义的状态（例如，我处于 0% 或 13%，当我按下“下一步”时，我想进入 50% 状态） .
这样做的目的是什么？您的意思是“现在为另一个元素设置动画”还是您真的只想为该特定元素设置动画？如果是这样，那就制作不同的css类（.stage1，.stage2 ...）并通过JS进行切换
@DavidFariña 我正在尝试制作自己的轮播脚本，因为我没有找到任何适合我需要的实现。轮播中每个元素的动画都是相似的，只是时间不同。因此，如果我们只想要自动轮播，这是一个不错的方法，而且效果很好！但是，如果我们需要在按下箭头时切换到下一个元素 - 这里我们需要转到选定的关键帧。

标签： javascript css css-animations

【解决方案1】：

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

请参考Old Post

来自同一帖子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>

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

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

【讨论】：