Transforms, Transitions, & Animations – A primer for how we move stuff on the web. – CSS Transforms

View Github Repository Open presentation in a new window

rogerflanagan

See all presentation from rogerflanagan

Transforms, Transitions, & Animations – A primer for how we move stuff on the web. – CSS Transforms

0 0

css3-animation-presentation

On Github rogerflanagan / css3-animation-presentation

Transforms, Transitions, & Animations

A primer for how we move stuff on the web.

CSS Transforms

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set. Mozilla Developer Network

Examples

  • Scale

  • Skew

  • Rotate

  • Translate

Transforms Combined

  • Scale / Skew

  • Rotate / Translate

Transform Origin

Transform Pitfalls

  • All transforms on a single element will occur simultaneously
  • Transforms occur on page load (No delay options)

Transitions

Examples

  • Scale

  • Skew

  • Rotate

  • Translate

Transitions

  • For a transition to take place an element must have a change in state
  • Usually triggered by a hover or focus interaction, like we have on our buttons and input fields.
The CSS transition property defines the transition between two states of an element. Mozilla Developer Network

Transition Breakdown

Animatable Properties

Animations vs. Transitions

Timing Functions

  • Linear
  • Ease In
  • Ease Out
  • Ease In Out
Compare Timing Functions

Benefits of Animations

  • Start Automatically
  • Define an iteration count or loop
  • Define Keyframes

@Keyframes

0 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

Examples

  • Scale Burst

  • Shutter

Resources / Questions