Мой переход на переход не является гладким с первой попытки

Question

У меня есть кнопка вызова к действию из текста со стрелкой> в ней. Я хотел, чтобы стрелка плавно переходила вправо, а затем возвращалась на место при наведении. Вот HTML, CSS и JQuery для кнопки CTA:

$("#lnkTech").hover(function(){ 
 
\t \t \t $("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateOut"); 
 
\t \t \t $("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateIn"); 
 
\t \t },function(){ 
 
\t \t \t $("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateIn"); 
 
\t \t \t $("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateOut"); 
 
\t \t });

/* CTA Styles */ 
 

 
.divCTA { 
 
\t background-color: #00AA7E; 
 
\t padding: 20px 0px; 
 
\t text-align: center; 
 
\t width: 12em; 
 
\t font-weight: bold; 
 
\t text-transform: uppercase; 
 
\t font-size: 0.8em; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 

 
.divCTA:hover { 
 
\t background-color: #009E75; 
 
} 
 

 
.divCTA a { 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
} 
 

 
.divCTA a:hover { 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
} 
 

 
.spnCTATxt { 
 
\t position: relative; 
 
\t -webkit-transition: all 1s ease-in-out; 
 
    \t -moz-transition: all 1s ease-in-out; 
 
    \t -o-transition: all 1s ease-in-out; 
 
    \t transition: all 1s ease-in-out; 
 
} 
 

 
.spnCTATxtArrow { 
 
\t -webkit-transition: all 1s ease-in-out; 
 
    \t -moz-transition: all 1s ease-in-out; 
 
    \t -o-transition: all 1s ease-in-out; 
 
    \t transition: all 1s ease-in-out; 
 
} 
 

 
.arrowAnimateIn { 
 
\t position: relative; 
 
\t left: 15px; 
 
\t -webkit-transition: all 1s ease-in-out; 
 
    \t -moz-transition: all 1s ease-in-out; 
 
    \t -o-transition: all 1s ease-in-out; 
 
    \t transition: all 1s ease-in-out; 
 
} 
 

 
.arrowAnimateOut { 
 
\t position: relative; 
 
\t left: 0px; 
 
\t -webkit-transition: all 1s ease-in-out; 
 
    \t -moz-transition: all 1s ease-in-out; 
 
    \t -o-transition: all 1s ease-in-out; 
 
    \t transition: all 1s ease-in-out; 
 
} 
 

 
.arrowAnimate { 
 
\t position: relative; 
 
\t -webkit-transition: all 1s ease-in-out; 
 
    \t -moz-transition: all 1s ease-in-out; 
 
    \t -o-transition: all 1s ease-in-out; 
 
    \t transition: all 1s ease-in-out; 
 
}

<div class="divCTA"> 
 
    <span class="spnCTATxt"><a href="ls.html" id="lnkTech" class="arrowAnimate">Learn More <span class="spnCTATxtArrow" id="lnkTechArrow">&gt;</span></a></span> 
 
</div>

Что происходит при загрузке или обновлении, стрелка быстро прыгает сверху права на первом парение, то переход пинков в при наведении курсора, и при последующих поворотах переход работает. Я бы хотел, чтобы переход на работу каждый раз, даже при первом зависании. Я даже добавил CSS перехода ко всем контейнерам, но я все равно получаю тот же результат.

Пожалуйста, помогите мне исправить это :(

Answer 1

решения довольно проста, вам необходимо установить начальное значение элемента к эффекту зависания бы начать с этого значения до значения transform так добавить в свой CSS

#lnkTech > .spnCTATxtArrow{ 
    left:0px; 

}