Есть кнопка с двумя анимациями , как бы сделать чтобы они запустились одновременно
<div class="knopka">
<a href="">
Проложить маршрут в Я.Карты <img src="Vector.svg" ></a>
</div>
.knopka{
display: block;
background-color: #50a467;
border-radius: 100px;
width:360px;
margin:20px auto;
text-align:center;
}
.knopka a{
color:#ffffff;
padding: 10px 20px;
text-decoration:none;
font-family:'Raleway',Arial,sans-serif;
font: 400 18px tahoma;
vertical-align:middle;
display:table-cell;
width:500px;
text-align:center;
}
.knopka img{
padding-left: 10px;
margin-bottom: -2px;
}
.knopka img:hover{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
.knopka a:hover{
animation-name: slideRight_text;
-webkit-animation-name: slideRight_text;
animation-duration: 0.9s;
transition: transform 500ms ease-out;
visibility: visible !important;
}
@keyframes slideRight_text{
0% {
-webkit-transform: translateX(0%);
}
4%{
-webkit-transform: translateX(1%);
}
8%{
-webkit-transform: translateX(2%);
}
12%{
-webkit-transform: translateX(3%);
}
16%{
-webkit-transform: translateX(4%);
}
20% {
-webkit-transform: translateX(5%);
}
24%{
-webkit-transform: translateX(6%);
}
28%{
-webkit-transform: translateX(7%);
}
32%{
-webkit-transform: translateX(8%);
}
36%{
-webkit-transform: translateX(9%);
}
40%{
-webkit-transform: translateX(10%);
}
44% {
-webkit-transform: translateX(11%);
}
48% {
-webkit-transform: translateX(12%);
}
52%{
-webkit-transform: translateX(11%);
}
56%{
-webkit-transform: translateX(10%);
}
60%{
-webkit-transform: translateX(9%);
}
64%{
-webkit-transform: translateX(8%);
}
68% {
-webkit-transform: translateX(7%);
}
72%{
-webkit-transform: translateX(6%);
}
76%{
-webkit-transform: translateX(5%);
}
80%{
-webkit-transform: translateX(4%);
}
84%{
-webkit-transform: translateX(3%);
}
88%{
-webkit-transform: translateX(2%);
}
92%{
-webkit-transform: translateX(1%);
}
100%{
-webkit-transform: translateX(0%);
}
}
@keyframes slideRight {
0% {
-webkit-transform: translateX(0%);
}
4%{
-webkit-transform: translateX(10%);
}
8%{
-webkit-transform: translateX(20%);
}
12%{
-webkit-transform: translateX(30%);
}
16%{
-webkit-transform: translateX(40%);
}
20% {
-webkit-transform: translateX(50%);
}
24%{
-webkit-transform: translateX(60%);
}
28%{
-webkit-transform: translateX(70%);
}
32%{
-webkit-transform: translateX(80%);
}
36%{
-webkit-transform: translateX(90%);
}
40%{
-webkit-transform: translateX(100%);
}
44% {
-webkit-transform: translateX(110%);
}
48% {
-webkit-transform: translateX(120%);
}
52%{
-webkit-transform: translateX(130%);
}
56%{
-webkit-transform: translateX(140%);
}
60%{
-webkit-transform: translateX(150%);
}
64%{
-webkit-transform: translateX(160%);
}
68% {
-webkit-transform: translateX(170%);
}
72%{
-webkit-transform: translateX(180%);
}
76%{
-webkit-transform: translateX(190%);
}
80%{
-webkit-transform: translateX(200%);
}
84%{
-webkit-transform: translateX(210%);
}
88%{
-webkit-transform: translateX(220%);
}
92%{
-webkit-transform: translateX(230%);
}
96%{
-webkit-transform: translateX(240%);
}
100%{
-webkit-transform: translateX(1000%);
}
}