html - html5：如何触发或停止 css3 循环动画？

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

施密蒂是对的。

我使用以下代码更改了类：

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

你们，伙计们，太棒了。非常感谢你。

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