Week 3: February 11: CSS Animations

2/11 Itinerary

  • Flexbox
  • Navigation
  • Faux Portfolio Styling
  • Work on Portfolios/Studio
  • CSS Animations
    • Transitions
    • Keyframes
    • Maxims
  • Discuss Lev Manovich Reading
  • Look at rest of Portfolio Examples
    • Color Swatches?


Understanding how flexbox works will be incredibly helpful to designing your sites, in this project and beyond.  Download the link below.

Flexbox Example Link

Resources for Flexbox

Navigation + Portfolio

Let’s look at an example navigation bar and sample portfolio. You can download it below.

Navigation Example Link

Portfolio Example Link

Sidebar Example Link

CSS Animations – Transitions & Keyframes

This file contains a link to 5 separate animation examples. Download this to your personal folder.

Animation Example Files

Resources for Animation

Animatable Properties

  1. Transitions
    1. CSS Tricks Transitions
    2. w3 School Transitions
    3. Shay Howe CSS Transitions
  2. Transform Property
    1. w3Schools Transform
    2. CSS Tricks Transform
  3. Keyframes
    1. Keyframe Animation Syntax – CSS Tricks
    2. w3Schools Keyframe
    3. CSS Keyframe for Beginners