CSS3动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
#myfirst {
0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
animation: myfirst 2s linear infinite normal;
-moz-animation: myfirst 2s linear infinite normal; /* Firefox: */
-webkit-animation: myfirst 2s linear infinite normal; /* Safari and Chrome: */
-o-animation: myfirst 2s linear infinite normal; /* Opera: */
}
@keyframes myfirst {
0% { transform: rotatez(0deg)}
50% { transform: rotatez(180deg)}
100% { transform: rotatez(360deg)}
}
@-moz-keyframes myfirst /* Firefox */
{
0% { -moz-transform: rotatez(0deg)}
50% { -moz-transform: rotatez(180deg)}
100% { -moz-transform: rotatez(360deg)}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { -webkit-transform: rotatez(0deg)}
50% { -webkit-transform: rotatez(180deg)}
100% { -webkit-transform: rotatez(360deg)}
}
@-o-keyframes myfirst /* Opera */
{
0% { -o-transform: rotatez(0deg)}
50% { -o-transform: rotatez(180deg)}
100% { -o-transform: rotatez(360deg) }
}
</style>
</head>
<body>
<div id="myfirst"></div>
</body>
</html>