CSS 过渡或动画在 phonegap 中不起作用答案

【问题标题】：CSS transition or animation not working in phonegapCSS 过渡或动画在 phonegap 中不起作用
【发布时间】：2013-04-19 18:28:02
【问题描述】：

我需要为<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吗？请帮忙。

【问题讨论】：

你试过transition: width 5s;吗？

标签： android css cordova cordova-2.0.0

【解决方案1】：

别忘了在 css 属性前面加上 -webkit-。它为我解决了所有问题。

此代码适用于我的情况：

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

您也可以使用“从，到”，它会正常工作。

【讨论】：

你拯救了我的一天 :)

【解决方案2】：

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

-webkit-animation: menuEffect 3s linear

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

【讨论】：