最近用了一段时间的CSS，自我感觉已经可以进行一些初步的CSS布局了，不过对于CSS这个东西而言，个人觉得也确实不难，其实只要一样一样搞懂就可以了。
之前学了一段时间的CSS，以为动画在CSS中应该会比较难，不过经过初步了解之后，其实也并不难，这篇博客是对CSS入门动画的一个记录，实现了一个小球上下跳动的动画。
我在代码里做了相关注解，以便更好的理解代码。
另外，可以参考这篇博客学习，我觉得还不错
blog.csdn.net/u013243347/…
还有这篇
www.cnblogs.com/starof/p/45…
贴上代码：
html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="cir">
</div>
</body>
</html>
CSS
.cir{
height:100px;
width:100px;
background-color:blue;
border-radius:100px;//利用圆角，将div变成圆形
animation: cir 2s linear infinite alternate;
//动画：动画名（cir） 持续时间(2s) 动画方式（linear）动画迭代次数（infinite无限次）动画方向（alternate交替播放）
}
@keyframes cir{
from{margin-top:0px}
to{margin-top:200px}
}
实现效果：
