html5 : how can i trigger or stop a css3 loop animation?

Question

我有一个像这样用 css3 动画制作的幻灯片:

@-keyframes animBanner
{
0% {top: 0px;}
18% {top: 0px;}
20% {top: -60px;}
38% {top: -60px;}
40% {top: -120px;}
58% {top: -120px;}
60% {top: -180px;}
78% {top: -180px;}
80% {top: -240px;}
98% {top: -240px;}
100% {top: 0px;}
}

我想给它添加控件，这样你就可以转到你想要的图片了。

我可以像这样使用简单的 javascript 触发转换事件:

var p=document.getElementById('elemId');
p.style.left= '50%';

但它不适用于动画。是否可以实现这项工作，还是我应该为动画使用 jquery？

Answer 1

Shmiddty 是对的。

我使用这段代码更改了类:

//Stop animation
var ad = document.getElementById('animBannerId');
ad.className="paused";
//Move the slide to the desired pic
anuncio.style.top = '160px';
//Etc.

我的 css 有这个转换代码:

.paused
{
position: relative;
transition:top 1s;
-o-transition:top 1s;
-webkit-transition:top 1s;
-moz-transition:top 1s;
}

小伙伴们，你们真棒。非常感谢。

顺便说一句，我没有添加重新启动动画的代码，但是可以制作一个计时器来完成