Animation using hardware acceleration CSS3 tags (see code below) works well in Google Chrome PC browser and Android browser on Samsung Galaxy SIII. However, the same does not work on Android browser on Samsung Galaxy Tab 10.1. How to realize hardware accelerated slide in/out animation on Samsung Galaxy Tab device?
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
border: 1px solid black;
background-color: red;
position: fixed;
left: 0px;
}
#div1.active
{
-webkit-transform-origin: 0% 0%;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
-webkit-transition-duration:2s;
-webkit-transform: translate3d(-100px,0px,0px);
}
#div1.inactive
{
-webkit-transform-origin: 0% 0%;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
-webkit-transition-duration:2s;
-webkit-transform: translate3d(0px,0px,0px);
}
#button1
{
position: fixed;
left: 200px;
}
</style>
<script>
var flag = 1;
function myFunction()
{
if (++flag % 2 === 0) {
//alert("active");
document.getElementById("div1").setAttribute("class", "");
document.getElementById("div1").setAttribute("class", "active");
} else {
//alert("inactive");
document.getElementById("div1").setAttribute("class", "");
document.getElementById("div1").setAttribute("class", "inactive");
}
}
</script>
</head>
<body>
<div id="div1">HELLO</div>
<button id="button1" onclick="myFunction()">Click me</button>
</body>
</html>
Kind regards, Vinaya
