<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
body{
background-color:black;
}
.point{
width:10px;
height: 10px;
background-color: white;
/*圆角半径*/
border-radius: 5px;
/*位置有关的移动要有定位*/
position: absolute;
top:200px;
/*动画关联 动画名称 执行时间 线性执行 无限执行*/
animation:run 10s linear infinite;
}
/*定义关键帧动画 translateX,translateX*/
@keyframes run{
0%{}
/*平移x轴y轴 放大倍数 背景颜色 透明的*/
10%{transform:translate(150px,-50px) scale(3);background-color: blue;opacity: 0.5;}
20%{transform:translate(300px,50px) scale(1);background-color: orange;opacity: 1;}
30%{transform:translate(450px,-50px) scale(3);background-color: green;opacity: 0.5;}
40%{transform:translate(600px,50px) scale(1);background-color: yellow;opacity: 1;}
50%{transform:translate(750px,-50px) scale(3);background-color: red;opacity: 0.5;}
60%{transform:translate(600px,50px) scale(1);background-color: plum;opacity: 1;}
70%{transform:translate(450px,-50px) scale(3);background-color: gold;opacity: 0.5;}
80%{transform:translate(300px,50px) scale(1);background-color: hotpink;opacity: 1;}
90%{transform:translate(150px,-50px) scale(3);background-color: goldenrod;opacity: 0.5;}
100%{transform:translate(0px,50px) scale(1);background-color: brown;opacity: 1;}
}
</style>
<body>
<!--
作者:offline
时间:2016-05-10
描述:关键帧动画
-->
<div class='point'></div>
</body>
</html>