I've been experimenting with CSS3 transitions to move an object horizontally to the right, but it's not working as expected. Here is my code snippet:
<h1>
<a href="#" class="qa">Check Q&A<i class="icon-right-open-gal"></i></a>
</h1>
The i element contains an image from a sprite sheet. My goal is to animate this element by shifting it to the right when the link is hovered over.
.qa{
&:link,&:visited{
padding: 10px;
text-decoration: none;
color: #f2f2f2;
font-size: 18px;
// @include background-image(linear-gradient(bottom, #42BA70, #49CB7A));
background-color: #E3560D;
@include box-shadow(inset 1px 1px rgba(255,199,170,0.5));
@include box-sizing(border-box);
text-transform: uppercase;
@include transition-property(all);
@include transition-duration(0.2s);
@include transition-timing-function(ease-in-out);
i{
font-size: 13px;
}
span{
font-family: helvetica-neue, helvetica, serif;
font-size: 15px;
}
}
&:hover, &:active{
background-color: #F77902;
@include box-shadow(inset 1px 1px rgba(248,255,170,0.5));
i{
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
}
}
Despite trying various options, the animation is not functioning correctly. I would appreciate any guidance on how to properly implement this effect. It's worth noting that I am using SASS for this particular project and have intentionally omitted the Compass mixin for the translation property to maintain clarity.