Everything

Animated

Animation is the rapid display of a sequence of images to create an illusion of movement.

History

Apple

JavaScript

Clock

CSS

Transforms

• Do not disrupt the normal flow
• transform & transform-origin
• skew, scale, rotate, translate

• 1
• 3.2
• 3.5
• 10.5
• 10

3D Transforms

• perspective & perspective-origin
• scale3d, rotateY, rotateY, rotateZ, translate3d

• 12
• 4
• 10
• 10

Transitions

        transition:  [
          <property> ||
          <duration> ||
          <timing-function> ||
          <delay> ]
      

• 1
• 3.2
• 4
• 10.5
• 10

Animations

        animaton:  [
          <name> ||
          <duration> ||
          <timing-function> ||
          <delay> ||
          <iteration-count> ||
          <direction> ||
          <fill-mode> ]
      

Keyframes

        @keyframes animation-name {
        0%, 100% {...}
        from, to {...}
        50% {...}
        }
      

Animations Events

• animationstart
• animationend
• animationiteration

• 4
• 4
• 5
• 12
• 10

Canvas is Bitmap!

Canvas

• getContext('2d')
• arc, stroke, fill, ...
• scale, rotate, translate, transform
• drawImage

Canvas

• Redraw Regions
• Procedural Sprites
• Multi-layered Canvas
• rAF

Control

• 21
• 6
• 15
• 10

Thanks

Pseudo-elements animation