Advanced Styles

Motion CSS Styles

We stress it a lot, but with motion, less really is more.  Motion adds a bit of emphasis to the content but you don't want to make things distracting.  Each animation will run just once* as the content is scrolled into the visible space on the page.

*Button animations will run when hovering, they will not run on focus.

Motion styles are for desktops and tablets.  We have purposely disabled them in mobile to provide a stable and consistent experience.  

Keep it accessible

As with any type of style we want to make sure that users who come to our pages are still finding them ready to use.  The motion styles were built to avoid repeating effects like bouncing, fading, or pulsing.  The styles that run only play once and therefore if you scroll up or down after the animation has finished, it will simply be static text to make sure users don't run into problems with content disappearing.

Remember that there are many different types of learning challenges we want to be mindful of.  Things that repeatedly bounce, flash, or move are distracting and can make it difficult to focus on page content.  

As you create your pages and develop content remember that something done once or twice is memorable, if every page has the same level of motion it tends to dull the impact on your content.