CSS only goodness: Part III

Are you sick of your animated menus being pretty jumpy on mobile devices? There's a simple solution to get super smooth transitions, even on graphic heavy pages. The key is to translate your elements position, not actually re-position them.

 

<div id="div" class="slide">Content</div>

<style>
#div {
  transition: transform 0.5s ease 0s;
  transform: translateX(0px);
}
#div:not(old).slide {
  transform: translateX(-100px);
}
</style>

Pretty easy huh? If your css is going to be used by desktops too, then you'll want to have a fall back for browsers that don't support 2D translations (thank you <= IE9 ). We'll make those browsers re-position. I choose to use a pseudo selector like "not()" as any browser that understands this, will also be able to do 2D translations.

<style>
/* for non translating browsers */
#div {
  transition: left 0.5s ease 0s;
  left: 0;
  position: absolute;
}
#div.slide {
    left: -100px;
}
/* for translating browsers */
#div:not(old) {
  transition: transform 0.5s ease 0s;
  transform: translateX(0px);
}
#div:not(old).slide {
  left: 0;
  transform: translateX(-100px);
}
</style>