0

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?

cibermesias
  • 19
  • 6
  • 1
    The common practice is to have a class for that animation and add/remove the class on elements you want to animate. – Shmiddty Nov 07 '12 at 20:10
  • What he said. IN addition it might be easier to do a setTimeout to remove the class, for example if you know the animation is 2s, then remove the class after 2.2s or whatever. For more accurate removal see: http://stackoverflow.com/questions/2794148/css3-transition-events – Dominic Nov 07 '12 at 20:13
  • See here: http://jsfiddle.net/rr6wf/ – Shmiddty Nov 07 '12 at 20:16

1 Answers1

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

cibermesias
  • 19
  • 6