最初の試行でホバー移行がスムーズでない

Question

矢印があるテキストからなる[行動を促す]ボタンがあります。私は矢印がホバリング時に右にスムーズに移行し、ホバリング時に元の位置に戻ることを望んでいました。ここではCTAボタンのHTML、CSSだ、とjQuery：何が起こることは

$("#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

ソリューションは非常に簡単です、あなたはホバー効果に要素に初期値を設定する必要がありますあなたのCSSに追加しますので、この値からtransform値 に開始します

#lnkTech > .spnCTATxtArrow{ 
    left:0px; 

}