Анимация, как сделать чтобы они запустились одновременно?

Есть кнопка с двумя анимациями , как бы сделать чтобы они запустились одновременно

<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%);

    }          

}

Например так

.knopka:hover img {
  animation-name: slideRight;

  animation-duration: 0.5s;
  animation-iteration-count: 1;

  animation-timing-function: ease-in-out;
}

.knopka:hover a {
  animation-name: slideRight_text;

  animation-duration: 0.9s;

  transition: transform 500ms ease-out;
}

https://jsfiddle.net/AlexP11223/ab40f5gn/8/


-webkit- префиксы наверняка уже давно можно убрать. + внизу чот вообще только вариант с префиксом.

А что нужно изменить ,чтобы изображение вернулось в поле, когда курсор отводишь с кнопки

Оно же сейчас и так прыгает в начало )

Если надо скрывать, то можно например

  • Добавить animation-fill-mode: forwards; чтоб оставалось в конце.
  • В последнем фрейме скрывать через например opacity: 0;
    96% {
      transform: translateX(240%);
      opacity: 1;
    }
    
    100% {
      transform: translateX(250%);
      opacity: 0;
    }
    

https://jsfiddle.net/AlexP11223/ab40f5gn/17/