on animation end w/o using .animate();

I'm building a iPad web app. The .animate() method is much too slow to use which is why the majority of my transitions are done using css. How do I implement

html

<div id="myGallery" class="container"></div>

css

.container {
position: fixed;
-webkit-transition: -webkit-transform 0.25s e开发者_StackOverflowase-in-out;
}

.pos-1 {
-webkit-transform:translate3d(0px,0px,0px);
}

.pos-2 {
-webkit-transform:translate3d(100px,0px,0px);
}
.pos-3 {
-webkit-transform:translate3d(200px,0px,0px);
}

js

$("#myGallery").removeClass("pos-" + this.previousId).addClass("pos-" + this.currentId);

$("#myGallery").bind("webkitAnimationEnd", function() {
        // this.style.webkitAnimationName = "";
        console.log("done animating");
    });

How do I use "webkitAnimationEnd" or rather how do I trigger "done animating" without resorting to using .animate()?

Can't you just change the class of the element from one which has an animation to one which doesn't?

Am I misunderstanding the question?

Do you mean the reverse? You want to know when the css animation is over? I assume you can do that by setting a timer and calculating in advance how long the animation should take.

1. position:fixed in iOS safari doesn't work. It would act like absolute; So don't use this property on iOS anymore as I'm doing same

2. You can do what are you trying to do with just CSS3 using steps() method.

Please don't use JavaScript aka jQuery here for doing animation in iOS. It never gave me good results.

Here is my fiddle your code in pure CSS for animation.

CSS:

@-webkit-keyframes pos1{
    from{-webkit-transform:translate3d(200px,0px,0px)}
    to{-webkit-transform:translate3d(0px,0px,0px)}   
}
@-webkit-keyframes pos2{
    from{-webkit-transform:translate3d(0px,0px,0px)}
    to{-webkit-transform:translate3d(100px,0px,0px)}   
}
@-webkit-keyframes pos3{
    from{-webkit-transform:translate3d(100px,0px,0px)}
    to{-webkit-transform:translate3d(200px,0px,0px)}   
}


.container {
width:100px; height:100px; border:1px solid gray;
    -webkit-transform:translate3d(200px,0px,0px)
}
.pos1{
  -webkit-animation-name: pos1;
 -webkit-animation-duration: 0.25s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-iteration-count: 1;

    -webkit-transform:translate3d(0px,0px,0px)
}

.pos2{
  -webkit-animation-name: pos2;
 -webkit-animation-duration: 0.25s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-iteration-count: 1;

    -webkit-transform:translate3d(100px,0px,0px)
}

.pos3{
  -webkit-animation-name: pos3;
 -webkit-animation-duration: 0.25s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-iteration-count: 1;

    -webkit-transform:translate3d(200px,0px,0px)
}

JQ

$('#p1').click(function(){
$('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos1');
});
$('#p2').click(function(){
$('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos2');
});
$('#p3').click(function(){
$('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos3');
});

HTML

<div id="myGallery" class="container"></div>
<input type="button" value="pos1"  id="p1"/>
<input type="button" value="pos2"  id="p2"/>
<input type="button" value="pos3"  id="p3"/>