Search code examples
csstransitiontranslate-animation

translateX with a link and a <i>

I'de like to make a short translateX transition of 5px to the right. I think I have a problem with the display. All other transitions work only this one doesn't...

Here is my code:

#content a.shake {
  display: inline-block;

  -moz-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  -ms-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#content a.shake i {
  display: inline-block;
}
#content a.shake:hover {
  display: inline-block;

  -webkit-tranform: translateX(5px);
  -moz-tranform: translateX(5px);
  -o-tranform: translateX(5px);
  -ms-tranform: translateX(5px);
  tranform: translateX(5px);
}
<a class="shake" href="#">Choisissez un prestataire<i class="icon-arrow"></i></a>

Solution

  • you have a typo : transform, not tranform

    tranform: translateX(5px);