这个程序是写用transform的动画座位关键帧的形式做的动画。其中要注意的是,transform动画的原点,旋转的原点是以自己的左上角,平移的参照点一直都是屏幕的左上角,出非手动更改。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width: 200px;height: 200px;background: red;
animation: move 4s infinite ease;}
@keyframes move{
0%{transform: translate(0px) rotate(0deg) ; }
25%{transform: translate(300px) rotate(180deg);}
50%{transform: translate(300px,600px) rotate(360deg) ;}
75%{transform: translate(0,300px) rotate(0deg) ;}
100%{transform: translateY(-300px) rotate(0deg);}
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>