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”

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>

https://developer.mozilla.org/en-US/docs/Web/SVG/Element

SVG Resources

Initializing Canvas

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

<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

• Fluid animation
• Shape & Path morphing

• Particles
• Games