CODEWITHSUNDEEP
androidcsscss-transforms
tcnarss
tcnarss

Reputation: 595

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

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

Upvotes: 0

Views: 2352

Answers (2)

user742030
user742030

Reputation:

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

Upvotes: 3

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

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.

Upvotes: 0

Related Questions