webkit-transform doesn't work on iOS

Question

I am trying to implement navigation drawer in my sencha touch app using this article. The animation explained in the article is done using webkit-transform. This works like charm on chrome on my desktop and android devices but it does not work on the iPad mini, not even on chrome. Here is my css:-

.slide{
-webkit-animation-duration: .200s;
-webkit-transition-timing-function: cubic-bezier(0.275, 0.080, 0.425, 0.855);
}    
@-webkit-keyframes slideout {

from {
-webkit-transform: translate3d(0,0,0);
}

to {
-webkit-transform: translate3d(250px,0,0);
};
}

@-webkit-keyframes slidein {
from {
-webkit-transform: translate3d(250px,0,0);
}

to {
-webkit-transform: translate3d(0px,0,0);
};
}

.slide.out {
-webkit-animation-name: slideout;
-webkit-transform: translate3d(250px,0,0);
}

.slide.in {
-webkit-animation-name: slidein;
-webkit-transform: translate3d(0px,0,0);
}

Is this some issue specific with iOS or I am doing something wrong?

Answer 1

Since you're just using "from" (=0%) and "to" (=100%) in your keyframes without defining any other steps (25%, 50% etc.) I don't see the actual benefit of using keyframes. Especially because keyframes cause lots of lines of CSS. Keyframes in my opinion do only make sense if you want to define substeps.

For all other purposes, transitions shall be the solution of choice since they're only animating from the starting point to your target value: See Fiddle

div {
    background:red;
    -webkit-transform:translate3d(0,0,0);
    -webkit-transition:-webkit-transform 1s;
}

.slide.in {
    -webkit-transform:translate3d(0,0,0);
}

.slide.out {
    -webkit-transform:translate3d(250px,0,0);
}