css3雷达动画解析--animation和@keyframe

前言

前段事件用到一个radar的动画，当时从网上找的现有的动画，今天正好有时间，好好理解下里面的原理。

正文

动画代码如下：

如图，主要用到的有animation和@keyframes两个属性。

• animation
  animation是css3中的动画属性，w3school上的示例代码如下：

div
{
   
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

代码示例解释：animation:animation-name animation-duration animation-delay;

• @keyframes
  @keyframes在菜鸟教程上的示例和语法如下图所示，有一些抽象，我结合radar图