CSS动画入门：一分钟实现球体上下跳动动画效果

最近用了一段时间的CSS，自我感觉已经可以进行一些初步的CSS布局了，不过对于CSS这个东西而言，个人觉得也确实不难，其实只要一样一样搞懂就可以了。

之前学了一段时间的CSS，以为动画在CSS中应该会比较难，不过经过初步了解之后，其实也并不难，这篇博客是对CSS入门动画的一个记录，实现了一个小球上下跳动的动画。
我在代码里做了相关注解，以便更好的理解代码。
另外，可以参考这篇博客学习，我觉得还不错
https://blog.csdn.net/u013243347/article/details/79976352
还有这篇
https://www.cnblogs.com/starof/p/4585324.html
贴上代码：
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}
}

实现效果：