闪烁的圆圈

Question

我制作了似乎闪烁的圆圈

我附上了两张照片。 有警报器，因为pic1和其他具有不同背景颜色的圆圈位于警报器后面，如图2所示。

我用下面的CSS制作了它。

 .box_siren_step1 {animation:alert_ani 2s infinite; -webkit-animation:alert_ani1 2s infinite;}
.box_siren_step2 {animation:alert_ani 2s infinite; -webkit-animation:alert_ani2 2s infinite;}
.box_siren_step3 {animation:alert_ani 2s infinite; -webkit-animation:alert_ani3 2s infinite;}
 .box_siren_step4 {animation:alert_ani 2s infinite; -webkit-animation:alert_ani4 2s infinite;}
@keyframes alert_ani4 {0%   {width:0px; height: 0px}  100%   {width:126px; height: 126px;}}
@-webkit-keyframes alert_ani4 {0%   {width:0px; height: 0px}  100%   {width:126px; height: 126px;}}
@keyframes alert_ani3 {0%   {width:0px; height: 0px}  100%   {width:116px; height: 116px;}}
@-webkit-keyframes alert_ani3 {0%   {width:0px; height: 0px}  100%   {width:116px; height: 116px;}}
@keyframes alert_ani2 {0%   {width:0px; height: 0px}  100%   {width:106px; height: 106px;}}
@-webkit-keyframes alert_ani2 {0%   {width:0px; height: 0px}  100%   {width:106px; height: 106px;}}
@keyframes alert_ani1 {0%   {width:0px; height: 0px}  100%   {width:96px; height: 96px;}}
@-webkit-keyframes alert_ani1 {0%   {width:0px; height: 0px}  100%   {width:96px; height: 96px;}}

这是它的HTML代码。

   <div class="iu-box siren_wrapper siren_wrapper">
            <div class="iu-box box_siren box_siren_step4"></div>
            <div class="iu-box box_siren box_siren_step3"></div>
            <div class="iu-box box_siren box_siren_step2"></div>
            <div class="iu-box box_siren box_siren_step1"></div>
            <div class="iu-box box_siren box_siren_step0"></div>
          </div>

问题是， CSS代码看起来很模糊......有没有其他方法可以使它变得清晰或简单？

这是JS Fiddle的代码。

http://jsfiddle.net/jooo/k1cenvx4