Poch Poch - 5 months ago 11
CSS Question

My hover transition isn't smooth on first try

I have a call to action button made of text that has an arrow > in it. I wanted the arrow to transition smoothly to the right on hover and then go back in place on hover out. Here's the HTML, CSS, and jQuery for the CTA button:



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

/* CTA Styles */

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

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

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

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

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

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

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

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

.arrowAnimate {
position: relative;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
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>





What happens is upon load or refresh, the arrow quickly jumps top the right on first hover, then the transition kicks in on hover out, and on subsequent hovers, the transition works. I would like the transition to work every time, even on the first hover. I've even added the transition CSS to all the containers but I still get the same result.

Please help me fix this :(

Answer

the solutions is quite simple , you need to set an initial value to the element to the hover effect would start from this value to the transform value so add to your css

#lnkTech > .spnCTATxtArrow{
  left:0px;

}
Comments