<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
@-webkit-keyframes lll {
0%{
-webkit-transform: rotate3d(180,180,180,90deg);
-moz-transform: rotate3d(180,180,180,90deg);
-o-transform: rotate3d(180,180,180,90deg);
}
100%{
-webkit-transform: rotate3d(80,80,80,135deg);
-moz-transform: rotate3d(80,80,80,135deg);
-o-transform: rotate3d(80,80,80,135deg);
}
}
#hello{
width: 300px;
height: 400px;
background-color: #646464;
-webkit-transition: all 3s linear;
-moz-transition: all 3s linear;
-o-transition: all 3s linear;
}
#hello{
-webkit-animation-name:lll;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
background-color: green;
}
</style>
</head>
<body>
<div id=”hello”></div>

记得兼容性问题
</body>
</html>

版权声明：本文为hello-dummy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/hello-dummy/p/9059314.html