CODEWITHSUNDEEP
androidcsscordovacordova-2.0.0
Sujit Y. Kulkarni
Sujit Y. Kulkarni

Reputation: 1386

CSS transition or animation not working in phonegap

I need to animate a <div>. Tried using @keyframes and transition. Here's a code:

TRANSITION

#menu{
...
width:70%;
-webkit-transition: width 5s;
..
}

KEYFRAMES

#menu{
    ...
    width:70%;
    animation: menuEffect 3s;
    ..
    }
@keyframes menuEffect
{
from {width:0%;}
to {width:70%;}
}

I'm using cordova/phonegap 2.0.0 and targeting android 4.0 and above. I do not see this working. Does transition and animation not support phonegap? Please assist.

Upvotes: 5

Views: 5729

Answers (2)

Dave Mackintosh
Dave Mackintosh

Reputation: 2796

With Phonegap you need to use the prefixed versions of the properties because it's just Webkit.

-webkit-animation: menuEffect 3s linear 

@-webkit-keyframes menuEffect
{
    from {
        width:0%;
    }
    to {
        width:70%;
    }
}

Upvotes: 6

K.K
K.K

Reputation: 2657

Just don't forget to prepend -webkit- to the css properties. It fixed all the problems for me.

This code worked in my case: 

/* Animation element id */
#animate {
  position: absolute;
  top: 100px;
  left: 100px;
  -webkit-animation: move 1s ease infinite;
}

@-webkit-keyframes move {
    50% {
        -webkit-transform: translate(100px, 100px);
    }
}

You can also use 'from, to' and it would just work fine.

Upvotes: 12

Related Questions