Animations
on the web

What is an Animation

• Anything that moves

Some real world usecases

Hover Effects

Sliders

Random Effects

Ok so how do I start?

• Transitions
• transition-property, transition-duration, transition-timing-function, and transition-delay

Animations

• Keyframes
• Transforms
• Animation

Example

The Javascript Way - Use the force - raw power of plain JS

When? / Why?

Lack of independent scale/rotation/position control

Performance

Finer controls - seek to a particular spot in the animation

Sequencing elements

Effects - Animating curves

Example

Animation Libraries

• Tween JS
• Jsanim
• Minified.js
• Greensock
  Popular Greensock Animations

Sources and Refrences

Pen CSS Q-Bert by Patrick Cox

Pen Transition Property by Shay Howe

Pen Changing a CSS Animation at its Current Values by Zach Saucier

Pen Pausing Transitions by Zach Saucier

Demo by Velocity JS