Question

I have a slideshow made with css3 animation like this:

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

I want to add controls to it, so you can go to the pic you want.

I can trigger transition events with a simple javascript like this:

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

but it doesn’t work with animation. Is it possible to make this work or should I use jquery for the animation?

Answer 1

Shmiddty was right.

I changed the classes using this code:

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

And my css has this code for the transitions:

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

You, guys, are great. Thank you very much.

By the way, I haven’t added a code for restarting the animation, but it can be done making a timer