1、代码（未添加GPU加速代码）
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<meta name="keywords" content="##，##，##，##，##，##">
<meta name="description" content="###....">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"> <style>
.animation {
-webkit-animation: rotateIn 1s .2s ease both infinite;
-moz-animation: rotateIn 1s .2s ease both infinite;
} @-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1
}
} @-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1
}
}
</style>
</head> <body> <img src="img/aaa.jpg" class="animation" />
</body> </html>
F12控制台Timeline记录：
2、代码（添加GPU加速代码）
-webkit-transform: translateZ(0)
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<meta name="keywords" content="##，##，##，##，##，##">
<meta name="description" content="###....">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"> <style>
.animation {
-webkit-animation: rotateIn 1s .2s ease both infinite;
-moz-animation: rotateIn 1s .2s ease both infinite;
} @-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg) translateZ(0);
opacity: 0; }
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1
}
} @-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg) translateZ(0);
opacity: 0;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1
}
}
</style>
</head> <body> <img src="img/aaa.jpg" class="animation" />
</body> </html>
F12控制台Timeline记录：
3、代码（添加GPU加速代码）
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<meta name="keywords" content="##，##，##，##，##，##">
<meta name="description" content="###....">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"> <style>
.animation {
-webkit-animation: rotateIn 1s .2s ease both infinite;
-moz-animation: rotateIn 1s .2s ease both infinite;
} @-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg) translateZ(0);
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1
}
}
</style>
</head> <body> <img src="img/aaa.jpg" class="animation" />
</body> </html>
F12控制台Timeline记录：
总结：好像没有什么大的优化，渲染和绘制时间差的不多。需要继续研究。
附：timeline用法
