CSS转换或动画无法在phonegap中工作

Question

我需要动画一个<div>.尝试使用@keyframes和过渡.这是一个代码:

过渡

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

关键帧

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

我正在使用cordova/phonegap 2.0.0并针对Android 4.0及更高版本.我认为这不起作用.转换和动画不支持phonegap吗？请协助.

Answer 1

只是不要忘记预先添加-webkit-到css属性.它为我解决了所有问题.

这段代码适用于我的情况:

/* 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);
    }
}

你也可以使用'from,to',它会正常工作.

Answer 2

使用Phonegap时，您需要使用属性的前缀版本，因为它只是Webkit。

-webkit-animation: menuEffect 3s linear

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