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>