Верстаю анимированную кнопку с волнами вокруг. Немогу добиться нужного результата. Пример кода: https://jsfiddle.net/po5cr6je/
.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;
}
}
Подскажите пожалуйста как из этой баганной кнопки сделать красивую анимацию?)