我在Android上做了一些关于CSS3动画的研究(使用webkit-transition进行转换).CSS3动画仍然是Webkit中的一个实验性功能.如果您尝试同时进行翻译和缩放,您会在CSS动画中发现一些故障和/或错误(例如,请参阅http://www.youtube.com/watch?v=vZdBVzN1B8Y).换句话说,在许多Android版本中,属性-webkit-transform:matrix(...)无法正常工作.同时进行缩放和转换的唯一正确方法是按此顺序设置"-webkit-transform:scale(...)translate(...)" .我将把这个结果放在这篇文章的底部.
正如你所看到的,我已经克服了大部分内容.然而,在Android 2.2(Froyo)的某些转换中仍然存在一些"闪烁".
现在我的问题是:有没有办法在Android 2.2上同时进行缩放和翻译而不闪烁？
我也试过 -webkit-backface-visibility:hidden; ,-webkit-perspective:1000; 和-webkit-transform:translate3d(..,0)但这些属性在转换中引入了一些小故障.您可以在以下视频中看到它:http://www.youtube.com/watch？v = Aplk-m8WRUE转换停止后取消缩放.
有没有其他解决方法来抑制闪烁？有任何想法吗？
以下是关于Android上CSS3过渡的结果(1.5 <= ver <= 2.2).它在蓝框上同时使用缩放和平移.
<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 …