CSS3 Animation issue on Android webkit -iteration-count and 'forwards' dont stop the animation

Question

I'm using some CSS3 2D transforms to animate a menu for an Android specific web app.

I'm inserting the animation parameters using Javascript as they only apply after an ontouchstart function is triggered.

Heres the javascript for the first part of the animation as an example:

function d1(){
        var d1=document.getElementById('d1');
        d1.style["-webkit-animation"] = "slide1";
        d1.style["-webkit-animation-duration"] = "3s";
        d1.style["-webkit-animation-iteration-count"] = "1";
        d1.style["-webkit-animation-fill-mode"] = "forwards";
        }

Heres the CSS3 for the slide1 animation:

     @-webkit-keyframes slide1 {
       0%{-webkit-transform:translateY(0) scaleY(0);}
       100%{-webkit-transform:translateY(122px) scaleY(1);}
     }

This code displays the animation correctly however once each state of the animation is completed it then disappears. From what i have read, this should be resolved by using -webkit-animation-fill-mode:forwards or -webkit-animation-iteration-count:1 but neither of these seem to stop/pause the animation after its played.

Has anyone else encountered a similar issue with Android? Please help. Thanks

score 3 · Answer 1 · answered Mar 15 '12 at 17:58

3

just add this to your CSS. Android doesn't like it to be nested or shorthand. I tried this and It worked fine for me and this is how I do all my webKit animation.

@-webkit-keyframes slide1 {
    -webkit-transform: translateY(122px);
    -webkit-transform: scaleY(1);
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 3s;
}

answered Mar 15 '12 at 17:58

This problem is resolved on Android 4, but simply defining `forwards` in a separate `-webkit-animation-fill-mode` declaration does the trick, in code and in stylesheets. – Klemen Slavič Oct 26 '12 at 13:28

score 0 · Answer 2 · answered Oct 26 '11 at 11:04

Have you investigated whether your animation returns to 0% stage, eg. setting initial scaleY to 0.25 or such?

Also, you could test through all the possible fill-modes (none/forwards/backwards/both) to see whether it has effect.

In addition, it's recommended (for better performance) to use translate3d() instead of translateX/Y.

CSS3 Animation issue on Android webkit -iteration-count and 'forwards' dont stop the animation

2 Answers2