CSS Transforms, Transitions, and Animations

Notes from Transforms

The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.

2D Transforms

2D transforms work on the x and y axes, known as horizontal and vertical axes

3D Transforms

3D transforms work on the x, y, and z axes

Notes from Transitions & Animations


For a transition to take place, an element must have a change in state, and different styles must be identified for each state. There are 4 transition related properties

  1. transition-property: determines exactly what properties will be altered in conjunction with the other transitional properties
  2. transition-duration: set using general timing values like seconds and milliseconds
  3. transition-timing-function: used to set the speed in which a transition will move
  4. transition-delay: sets a time value that determines how long a transition should be stalled before executing

Notes from 8 Simple CSS Transitions That Will Wow Your Users by Sara Vieira

  1. Fade in
  2. Change Color
  3. Grow & Shrink
  4. Rotate elements
  5. Square to circle
  6. 3D Shadow
  7. Swing (this annimation moves the element left and right)
  8. Insert border