<div class="cp_anime09">
<div class="cp_center"></div>
<div class="cp_explosion"></div>
</div>
.cp_anime09 {
line-height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
}
.cp_anime09 .cp_center,
.cp_anime09 .cp_explosion {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
}
.cp_anime09 .cp_center {
-webkit-animation: anime09_pulse 1.5s infinite;
animation: anime09_pulse 1.5s infinite;
opacity: 0.8;
background: rgba(103,58,183 ,1);
}
.cp_anime09 .cp_explosion {
-webkit-animation: anime09_pulseradius 1.5s infinite;
animation: anime09_pulseradius 1.5s infinite;
background: rgba(103,58,183 ,0.5);
}
@-webkit-keyframes anime09_pulse {
30% { -webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0.8; }
50% { -webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 1.0; }
70% { -webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; }
}
@keyframes anime09_pulse {
30% { -webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0.8; }
50% { -webkit-transform: scale(1.1);
transform: scale(1.1);
opacity: 1.0; }
70% { -webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; }
}
@-webkit-keyframes anime09_pulseradius {
30% { -webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 1; }
40% { -webkit-transform: scale(7.8);
transform: scale(7.8);
opacity: 0.1; }
80% { -webkit-transform: scale(4.8);
transform: scale(4.8);
opacity: 0; }
100% { -webkit-transform: scale(1);
transform: scale(1);
opacity: 0; }
}
@keyframes anime09_pulseradius {
30% { -webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 1; }
40% { -webkit-transform: scale(7.8);
transform: scale(7.8);
opacity: 0.1; }
80% { -webkit-transform: scale(4.8);
transform: scale(4.8);
opacity: 0; }
100% { -webkit-transform: scale(1);
transform: scale(1);
opacity: 0; }
}