FRAME

A single still image representing a piece of time in an animation. Multiple frames passed in front of the eye per second can create the illusion of movement or “moving picture”

KEYFRAME

A frame of an animation that serves as a “milestone” or marker of a major change.

TWEEN

A programmatically created transition between 2 keyframes.

RASTER

An graphic whose data is represented by a pixel grid.

VECTOR

An graphic whose data is represented by mathematical equations and instructions.

FRAME RATE

Number of frames that flash per second.

CSS Transition Property

transition:   height       1s       ease-in-out      0.5s   ;
         // [property] [duration] [timing function] [delay]

// shorthand for these properties
transition-property: height;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 0.5s;

//Multiple properties using the shorthand transition property
transition: width 0.35s ease-in, height 0.35s ease-out 0.35s;

Flag Accordion

Using transitions

CSS Keyframes

@keyframes pulsar {
    0% {
        transform: rotate(0deg) scale(1,1);
        background-color: red;
    }
    50% {
        transform: rotate(180deg) scale(1.5,1.5);
        background-color: blue;
    }
    100% {
        transform: rotate(360deg) scale(1,1);
        background-color: red;
    }
}

.box {
    animation: pulsar    2s         ease-in-out     0.5s           3           reverse    forwards   running;
            // [name] [duration] [timing function] [delay] [iteration count] [direction] [fill mode] [play state]

    animation-name: pulsar;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.5s;
    animation-iteration-count: 3;
    animation-direction: reverse;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

Flag Accordion

Using keyframes

CSS Animation resources

<svg>

    <circle cx="10" cy="10" r="20" />





    <rect x="10" y="10" width="150" height="150" />





    <polygon points="" />





    <polyline point="" />





    <path d="" />


</svg>

1

2

3

<img src="graphic.svg" />
.placeholder {
   background-image: url("graphic.svg");
}

HTML Image Tag

CSS Background Image

<svg>

    ...svg magic tags...

</svg>

Inline HTML

SVG Resources

Adobe Illustrator, Sketch, Inkscape

Initializing Canvas

<canvas id="my-canvas">

</canvas>

<script type="text/javascript" />
    var canvas = document.getElementById('my-canvas');
    var context = canvas.getContext('2d');
</script>

Drawing on Canvas

Animating on Canvas

Canvas Resources

  •  MDN Canvas tutorial
  • CSS Tricks
  • Search 'canvas' on codepen

CSS Animations

  • UI Elements
  • Toggling between states
  • Simple shapes & transforms
  • Animate existing SVG graphics

SVG

  • Fluid animation
  • Shape & Path morphing

Canvas

  • Particles
  • Games

EASY

HARD

Animation on the Web

By Jessica Biggs

Animation on the Web

  • 1,531