我没有在Android上一些研究关于CSS3动画（转型与WebKit的过渡）。 该CSS3动画仍然在Webkit的一个实验性的功能。如果你尝试做平移和缩放在同一时间，你会发现在CSS动画的几个故障和/或错误（例如，看到的 http://www.youtube.com/watch?v=vZdBVzN1B8Y ）。换句话说，在Android中的许多版本属性的 -webkit-变换：矩阵（...）的工作不正常。得到的唯一正确途径，同时缩放和平移被设置的 - WebKit的变换：规模（...）翻译（...）的这个顺序。 我将我的希尔结果在这篇文章的底部。

正如你可以在里面看到的，我已经克服了其中的大多数。 然而，仍然有在在Android 2.2（升级Froyo）。

现在我的问题：有没有办法做到缩放和平移的同时无闪烁在Android 2.2

我也试过的 -webkit-背面能见度：隐藏; 的 -webkit-观点：1000; 和 -webkit-变换：translate3d（ ..，0）的，但这些属性介绍了一些转型期毛刺。你可以看到在下面的视频： http://www.youtube.com/watch?v=Aplk-m8WRUE 过渡站后的比例被取消。

有没有其他的解决方法，晚饭preSS忽悠？ 任何想法？

下面是我对在Android CSS3过渡效果（1.5＆LT; =版本＆LT; = 2.2）。 它采用缩放和平移在同一时间上的蓝色框。

 ＆LT; HTML＆GT;
＆LT; HEAD＆GT;
 ＆LT;冠军＆GT; css3test＆LT; /标题＆GT;
 ＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
 ＆LT; META NAME =视口内容=WIDTH =设备宽度＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; D​​IV ID ='登录'＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID ='盒子'风格=背景色：蓝色;宽度：100;高度：100;＆GT;＆LT; / DIV＆GT;
＆LT; SCRIPT LANGUAGE =JavaScript的'＆GT;
功能MESG（STR）{
  的document.getElementById（'登录'）的innerHTML =海峡。
}
变种E =的document.getElementById（'盒子'）;
e.style [' -  WebKit的过渡性'] ='-webkit-变换;
e.style [' -  WebKit的变换原点'] =0;
e.style [' -  WebKit的过渡时间'] ='350毫秒';
e.style [' -  WebKit的过渡定时功能'] ='直线';

//这些属性将燮preSS闪烁，但spoiles缩放在Android 2.2 ...
//看到http://www.youtube.com/watch?v=Aplk-m8WRUE
e.style [' -  WebKit的背面能见度'] =隐藏;
e.style [' -  WebKit的视角'] ='1000';

变种B = 0;
传播doAnim（）{
  无功反式;
  开关（二）{
  情况下0：// 0步转化和规模的同时
    // 1）矩阵
    //在Android 1.5中，我们没有得到翻译，但框只是放大。破碎。
    //在Android 2.2，过渡不会发生，但盒子瞬间移动。
    //反='矩阵（2,0,0,2,100,100）;
    // 2）头垢，然后翻译
    //在Androi2.2，还有一些小问题。
    //反='规模（2,2）翻译（50像素，50像素）';
    // 3）tranlate，再秤 - 正确
    反='翻译（100像素，100像素）的规模（2,2）';
    打破;
  案例1：//第1步翻译
    // 1）矩阵
    //反='矩阵（1,0,0,1,35,35）;
    // 2）只有翻译 - 会破坏过渡 - 
    //在Android 1.5，过渡腐化和箱体反复移动在一个错误的方向。错误？
    //看到http://www.youtube.com/watch?v=vZdBVzN1B8Y
    //反='翻译（35px，35px）;
    // 3）tranlate，再秤（1,1） - 正确
    反='翻译（35px，35px）规模（1,1）';
    打破;
  案例2：//步骤2缩放
    // 1）矩阵 - 没了。
    //反='矩阵（1.4,0,0,1.4,0,0）;
    // 2）只有规模 - 将破坏过渡 - 
    //反='规模（1.4,1.4）;
    // 3）tranlate用（0px，0ox），然后秤 - 正确
    反='翻译（0px，0px）规模（1.4,1.4）;
    打破;
  情形3：//再次执行步骤3，翻译和规模的同时
    // 1）矩阵 - 没了。
    //反='矩阵（1.2,0,0,1.2,100,100）;
    // 2）规模再翻译 - 会破坏过渡 - 
    //反='规模（1.2,1.2），翻译（83.33px，83.33px）;
    // 3）tranlate，再秤 - 正确
    反='翻译（100像素，100像素）的规模（1.2,1.2）;
    打破;
  }
  e.style [' -  WebKit的变换'] =反;
  MESG（移动+ B +'＆LT; BR /＆GT;转换：'+反式）;

  B =（B + 1）％4;
}
。VAR isAndroid =（新的RegExp（机器人，GI））的测试（navigator.appVersion）;
如果（isAndroid）{
  e.addEventListener（'touchstart'，doAnim，假）;
} 其他 {
  e.addEventListener（鼠标按下，doAnim，假）;
}
document.addEventListener（touchmove'，功能（五）{ÉpreventDefault（）;}，FALSE）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
 

解决方案

这是一个开放的bug。明星也把票投给它尽快解决：

http://$c$c.google.com/p/android/issues/detail?id=12451

I did some research on Android about CSS3 animation (transformation with webkit-transition). The CSS3 animation is still an experimental feature in Webkit. If you try to do translation and scaling at the same time, you'll find a few glitches and/or bugs in the CSS Animation (for example, see http://www.youtube.com/watch?v=vZdBVzN1B8Y ). In other words, in many versions of Android the property -webkit-transform:matrix(...) does not work correctly. The only correct way to get scaling and translation at the same time is to set "-webkit-transform:scale(...) translate(...)" in this order. I'll shere my results at the bottom of this post.

As you can see in it, I have overcome most of them. However, there's still some `flicker' in some transition on Android 2.2 (Froyo).

Now my question: is there any way to do scaling and translation at the same time without flicker on Android 2.2?

I've also tried -webkit-backface-visibility:hidden;, -webkit-perspective:1000; and -webkit-transform:translate3d(..,0) but these properties introduce some glitch in the transition. You can see it in the following video: http://www.youtube.com/watch?v=Aplk-m8WRUE The scaling is canceled after the transition stops.

Is there any other workaround to suppress flicker? Any ideas?

The below is my results about CSS3 transition on Android (1.5 <= ver <= 2.2). It employs scaling and translation at the same time on the blue box.

<html>
<head>
 <title>css3test</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <meta name="viewport" content="width=device-width">
</head>
<body>
<div id='log'></div>
<div id='box' style="background-color: blue; width:100; height:100;"></div>
<script language='JavaScript'>
function mesg(str) {
  document.getElementById('log').innerHTML = str;
}
var e = document.getElementById('box');
e.style['-webkit-transition-property'] = '-webkit-transform';
e.style['-webkit-transform-origin'] = "0 0";
e.style['-webkit-transition-duration'] = '350ms';
e.style['-webkit-transition-timing-function'] = 'linear';

// These properties will suppress flicker, but spoiles scaling on Android 2.2 ...
// see http://www.youtube.com/watch?v=Aplk-m8WRUE
e.style['-webkit-backface-visibility'] = 'hidden'; 
e.style['-webkit-perspective'] = '1000';

var b = 0;
function doAnim() {
  var trans;
  switch(b){
  case 0: // step 0. translate and scale at the same time
    // 1) matrix
    // On Android 1.5, we get no translation, but the box is only enlarged. Broken.
    // On Android 2.2, the transition does not occur but the box moves instantly.
    //trans = 'matrix(2,0,0,2,100,100)';
    // 2) scale first, then translate
    // On Androi2.2, there's some glitches.
    //trans = 'scale(2,2) translate(50px,50px)'; 
    // 3) tranlate first, then scale -- CORRECT 
    trans = 'translate(100px,100px) scale(2,2)';
    break;
  case 1: // step 1. translate
    // 1) matrix 
    //trans = 'matrix(1,0,0,1,35,35)';
    // 2) translate only -- will spoil transition -- 
    // On Android 1.5, the transition corrupts and the box repeatedly moves in a wrong direction. Bug?
    // see http://www.youtube.com/watch?v=vZdBVzN1B8Y
    //trans = 'translate(35px,35px)';
    // 3) tranlate first, then scale with (1,1) -- CORRECT 
    trans = 'translate(35px,35px) scale(1,1)';
    break;
  case 2: // step 2. scaling
    // 1) matrix -- nope.
    //trans = 'matrix(1.4,0,0,1.4,0,0)';
    // 2) scale only -- will spoil transition --
    //trans = 'scale(1.4,1.4)';
    // 3) tranlate with (0px,0ox), then scale -- CORRECT 
    trans = 'translate(0px,0px) scale(1.4,1.4)';
    break;
  case 3: // step 3. again, translate and scale at the same time
    // 1) matrix -- nope.
    //trans = 'matrix(1.2,0,0,1.2,100,100)';
    // 2) scale then translate -- will spoil transition --
    //trans = 'scale(1.2,1.2) translate(83.33px,83.33px)';
    // 3) tranlate first, then scale -- CORRECT 
    trans = 'translate(100px,100px) scale(1.2,1.2)';
    break;
  }
  e.style['-webkit-transform'] = trans;
  mesg('move '+b+'<br/>transform:'+trans);

  b=(b+1)%4;
}
var isAndroid = (new RegExp("android","gi")).test(navigator.appVersion);
if(isAndroid) {
  e.addEventListener('touchstart', doAnim, false);
} else {
  e.addEventListener('mousedown', doAnim, false);
}
document.addEventListener('touchmove', function(e){ e.preventDefault(); }, false);
</script>
</body>
</html>

it's an open bug. star it to vote for it to be fixed asap.:

http://code.google.com/p/android/issues/detail?id=12451