.circle {
  height:175px;
  width:175px;
  border-radius:50%;
  background-color: lightskyblue;
      background-position: center;
    background-size: cover, contain;
  position:absolute;
  -webkit-transition:height .5s ease, width .5s ease;
  transition:height .5s ease, width .5s ease;
    -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);

	top:50%;
	left: 50%;
/*	bottom: 0;*/
/*	right: 0;*/
/*	margin: auto;*/
}
.circle:before,
.circle:after {
  content:'';
/*  display:block;*/
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  border-radius:50%;
  border:2px solid lightskyblue;
}
.circle:before {
  -webkit-animation: ripple 4s linear infinite;
  animation: ripple 4s linear infinite;
}
.circle:after {
  -webkit-animation: ripple 4s linear 2s infinite;
  animation: ripple 4s linear 2s infinite;
}
@-webkit-keyframes ripple{
  0% {-webkit-transform:scale(1); }
  25% {-webkit-transform:scale(1.25); opacity:1;}
  50% {-webkit-transform:scale(1.50); opacity:1;}
  75% {-webkit-transform:scale(1.75); opacity:1;}
  100% {-webkit-transform:scale(2); opacity:0;}
}
@keyframes ripple{
  0% {transform:scale(1); }
  25% {transform:scale(1.25); opacity:1;}
  50% {transform:scale(1.50); opacity:1;}
  75% {transform:scale(1.75); opacity:1;}
  100% {transform:scale(2); opacity:0;}
}
/*
.circle:hover:before,
.circle:hover:after {
  -webkit-animation: none;
  animation: none;
}*//*
.circle:hover{
  height:150px;
  width:150px;
}
*/