Animated button

[nishika]

I'm retrieving animated button with waves around. I can't get the right result. Example of code:

.promo__play {
  background-image: url('https://s32.postimg.org/sxifa8h79/main_bg.jpg');
  display: table;
  width: 100%;
}
.promo__play__content {

display: table-row;

}
.promo__play__content__item {

height: 350px;

display: table-cell;

text-align: center;

vertical-align: middle;

}
.promo__play__text {

color: #0e91a0;

font-size: 14px;

font-weight: 700;

margin-top: 10px;

}
.promo__play__circle {

padding-top: 45px;

position: relative;

padding-left: 10px;

-webkit-border-radius: 50%;

border-radius: 50%;

display: inline-block;

cursor: pointer;

vertical-align: middle;

background-color: #fff;

width: 140px;

height: 140px;

}
.circle:after, .circle:before, .promo__play__circle:after, .promo__play__circle:before {

content: '';

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}
.promo__play__circle:after, .promo__play__circle:before {

-webkit-border-radius: 50%;

border-radius: 50%;

border: 1px solid #7796a9;

}
.promo__play__circle:before {

-webkit-animation: rippl 2s linear infinite;

animation: rippl 2s linear infinite;

}
.promo__play__circle:after {

-webkit-animation: rippl 2s linear 1s infinite;

animation: rippl 2s linear 1s infinite;

}
.circle:after, .circle:before {

-webkit-border-radius: 50%;

border-radius: 50%;

border: 1px solid #7796a9;

}
.circle:before {

-webkit-animation: ripple 2s linear infinite;

animation: ripple 2s linear infinite;

}
.circle:after {

-webkit-animation: ripple 2s linear 1s infinite;

animation: ripple 2s linear 1s infinite;

}
@-webkit-keyframes ripple {

0% {

-webkit-transform: scale(1);

transform: scale(1);

opacity: .6;

}

75% {

-webkit-transform: scale(1.5);

transform: scale(1.5);

opacity: .5;

}

100% {

-webkit-transform: scale(2);

transform: scale(2);

opacity: 0;

}

}
@keyframes ripple {

0% {

-webkit-transform: scale(1);

transform: scale(1);

opacity: .6;

}

75% {

-webkit-transform: scale(1.5);

transform: scale(1.5);

opacity: .5;

}

100% {

-webkit-transform: scale(2);

transform: scale(2);

opacity: 0;

}

}
@-webkit-keyframes rippl {

0% {

-webkit-transform: scale(2.2);

transform: scale(2.2);

opacity: .6;

}

75% {

-webkit-transform: scale(2.8);

transform: scale(2.8);

opacity: .5;

}

100% {

-webkit-transform: scale(3);

transform: scale(3);

opacity: 0;

}

}
@keyframes rippl {

0% {

-webkit-transform: scale(2.2);

transform: scale(2.2);

opacity: .6;

}

75% {

-webkit-transform: scale(2.8);

transform: scale(2.8);

opacity: .5;

}

100% {

-webkit-transform: scale(3);

transform: scale(3);

opacity: 0;

}

}

Can you tell me how to make a beautiful animation out of this banana?

[Kadyn]

Implementation on js+transitions:

http://jsfiddle.net/ivanovsuper/d4LVA/1/

function go() {
  setInterval(function() {
    $(".anim").addClass('hover');
    var d = $("<div class='anim'/>");
    d.appendTo($(document.body));
    setTimeout(function() {
      d.remove();
    }, 10000);
  }, 1000);
}
go();

.apple {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 200px;
  top: 200px;
  border: solid 1px red;
  border-radius: 50px;
  background: red;
}
.anim {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 200px;
  top: 200px;
  border: solid 1px red;
  border-radius: 50px;
  transition: all 5s linear;
}
.anim.hover {
  top: 0px;
  left: 0px;
  width: 500px;
  height: 500px;
  border-radius: 1000px;
  border-color: rgba(255, 0, 0, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="apple"></div>