By
Miha1l
Здравствуйте, наткнулся на простую CSS анимацию свойством animation, но что-то она у меня не запускается - просто стоит посередине кнопки и все. Помогите пожалуйста.
Пытаюсь скопировать "перелив" с кнопки Смотреть тут http://ma******.ru/
.b-button_animation {
animation: 4s ease 0s normal none infinite running flash-button;
background-image: -moz-linear-gradient(0px 0 , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 50%);
background-position: -150px -150px, 0 0;
background-size: 250% 450%, 100% 100%;
}
.b-button_common-black {
background: #686868; /* Old browsers */
background: -moz-linear-gradient(top, #686868 0%, #2a2a2c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #686868 0%,#2a2a2c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #686868 0%,#2a2a2c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#2a2a2c',GradientType=0 ); /* IE6-9 */
height: 65px;
width: 270px;
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
}
.b-button {
display: inline-block;
vertical-align: middle;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
text-align: center;
}
HTML кнопки
<div class="b-button b-button_common-black"><a href="#" class="b-button_animation>Нажми меня!</a></div>