This page uses javascript to help render elements, if you have problems please enable javascript.
 
Skip to main content
 
 
 
 
 
 
You are now inside the main content area
 
 
 
left col

Advanced Styles

Motion: Animation Delays

Each motion was designed to have specific timing when activated.  Delays are here to help you slow down the animations so you can adjust the timing when things happen on the page.  This can either speed up or slow down the amount of time before the animation triggers, but it will not create a longer version of the animation itself.

Basic Style Format

  • motion-delay-0
  • motion-delay-1
  • motion-delay-2
  • motion-delay-3
  • there are more delays from 0 to 20, the last delay is motion-delay-20
right col
 
left col

Fade In Examples

right col
 
 
 
 
left col

Regular style no delay added

motion-delay-0

motion-delay-6

motion-delay-9

right col
 
 
 
 
left col

motion-delay-12

motion-delay-15

motion-delay-18

motion-delay-20

right col
 
left col

Movement and Reveal Styles

Delays are really apparent with things move.  If you have several items that you want to showcase each thing as a part of a group, having them move at slightly different times keeps the group feeling but allows users to really identify that there are separate pieces.

right col
 
 
 
left col

Move up no delay

Move up with delay 6

Move up with delay 9

right col
 
 
 
left col

Item with delay 1

Item with delay 2

Item with delay 3

right col
 
left col

Death by delay

As you can see in that example above, yes, delays work; however, if you don't have a coordinated plan for your delays it can make the content feel out of sorts.  This makes it hard to identify what is the order in which you should focus your attention.

Remember that a little motion goes a very long way, we can't stress this enough.  Keep your pages easy to read and easy to follow.

right col
 
 
 
left col
right col
 
 
 
left col
right col