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

你们，伙计们，很棒。非常感谢你。

顺便说一句，我还没有添加重启动画的代码，但是可以做一个定时器

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

1 个答案: