Atomic patterns are the basic building blocks for motion. They can be used alone, or combined to create more complex animations.
#Enter and exit
Used to introduce and dismiss elements.
#Opacity (fade)
Simplest and most subtle way to reveal or hide elements.
Default easing: Linear
Default duration: 200 ms
#Position (move)
Grabs attention when hiding or revealing elements.
Enter:
Default easing: Entry
Default duration: 500 ms
Exit:
Default easing: Slide Down
Default duration: 400 ms
#Position and opacity
Calls more attention to an entering element than just opacity alone, and is less harsh than position alone.
Default easing: Entry (position), Linear (opacity)
Default duration: 500 ms (position), 200 ms (opacity)
#Transform
Allows elements to move and change.
#Position (move)
Elements move to accommodate changes in content.
Default easing: Standard
Default duration: 500 ms
#Rotation
Shows change in direction.
Default easing: Standard
Default duration for icons: 200 ms (90 degrees) or 400 ms (180 degrees)
#Scale
Elements change size along the x and/or y axis, to accommodate more or less content or adjust to a new layout.
Default easing: Standard
Default duration: 500 ms
#Color
Communicates a hover, focus or active state.
Default easing: Linear
Default duration: 0 ms