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 Tricks
- Animate.css
- Ceaser
- MDN CSS animation reference
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
Snap.svg http://snapsvg.io/
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
From MDN's Canvas Tutorial
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
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