css3 ripple loop

1.circle {
2  height:100px;
3  width:100px;
4  border-radius:50%;
5  background-color:red;
6  
7  position:relative;
8  top:100px;
9  left:300px;
10  
11  -webkit-transition:height .25s ease, width .25s ease;
12  transition:height .25s ease, width .25s ease;
13  
14  -webkit-transform:translate(-50%,-50%);
15  transform:translate(-50%,-50%);
16}
17
18.circle:hover{
19  height:150px;
20  width:150px;
21}
22
23.circle:before,
24.circle:after {
25  content:'';
26  display:block;
27  position:absolute;
28  top:0; right:0; bottom:0; left:0;
29  border-radius:50%;
30  border:1px solid red;
31}
32
33.circle:before {
34  -webkit-animation: ripple 2s linear infinite;
35  animation: ripple 2s linear infinite;
36}
37.circle:after {
38  -webkit-animation: ripple 2s linear 1s infinite;
39  animation: ripple 2s linear 1s infinite;
40}
41
42.circle:hover:before,
43.circle:hover:after {
44  -webkit-animation: none;
45  animation: none;
46}
47
48@-webkit-keyframes ripple{
49  0% {-webkit-transform:scale(1); }
50  75% {-webkit-transform:scale(1.75); opacity:1;}
51  100% {-webkit-transform:scale(2); opacity:0;}
52}
53
54@keyframes ripple{
55  0% {transform:scale(1); }
56  75% {transform:scale(1.75); opacity:1;}
57  100% {transform:scale(2); opacity:0;}
58}