I want to have two webkitTransitions applied one after one to the same div element for webkitTransform property. Here is the code:
<html>
<head>
<title></title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init);
function init() {
var d1 = document.getElementById("d1");
d1.style.webkitTransition = "-webkit-transform 1s linear";
d1.style.webkitTransform = "translate(-100px,0px)";
setTimeout(function(){
d1.style.webkitTransition = "-webkit-transform 1s linear";
d1.style.webkitTransform = "translate(-150px,0px)";
}, 1500);
}
</script>
<style type="text/css">
div#d1 {
position: absolute;
background-color: rgba(13,15,112,122);
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="d1"/>
</body>
</html>
This results to the second transform is applied directly without any transition on Android 4.0.4 Samsung tablets default browser (GT-P5110 GT-P3110 ...). Other devices work fine. I've tried using with/without 3d postfix and open GL switched on/off. Does anyone have the same experience?
We had the same problem, it's a (big) bug of Android 4.0.4 WebView. We had to write again some animations on our webapp. The trick is to use the CSS matrix property for every transformation, instead of the specific translate, scale, and so on.
This link is very nice to learn more on 2D matrices: http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix2dExplorer.html