I don't typically post simple links anymore but as this has a rather tight schedule and may not make it before my next podcast, I wanted to share it right away. I had the pleasure of seeing Rachel Nabors speak on CSS Animations a few months back. While animation is not really something I'm good at, I was blown away by how far CSS had come in terms of interactivity.

Rachel is hosting a one day workshop on October 4th. This will be available both to people local to the event as well as online. It is a full day and covers CSS (obviously), HTML5 Audio, performance, and more.

To find out more, and to book your ticket, follow this link. I've copied her course outline below the link, but obviously it may change so check the site for the most up to date information: Creating Animated Scenes (with CSS3 and HTML5) Workshop

Schedule

Part 1: Transitions

  • Anatomy of a Transition
  • Shorthand and Transitioning Multiple Properties
  • Focus on Timing Functions
  • Focus on Play State
  • Triggering Transitions without JavaScript
  • Focus on Staging
  • Showing and Hiding
  • Scene Transitions: Iris Wipes, Fading to Black
  • Browser Support

Part 2: Animations

  • Anatomy of an Animation
  • Advanced Anatomy of the animation Property
  • Anatomy of a @keyframes block
  • Multiple animations
  • The steps() timing function
  • The walk cycle
  • Making a walk cycle with steps()
  • Transitioning between a walk and a run cycle
  • Cut­outs
  • Using cut­outs to save page weight
  • Parallax Backgrounds
  • Making a parallax background
  • Parallax in Web Design
  • Interactive Parallax with Skrollr
  • Browser Support
  • When to Use CSS Transitions vs. Animations

Part 3: HTML5 Audio

  • Anatomy of an Audio Tag
  • Attributes and Sources of an Audio Tag
  • Making an audio element
  • Gapless audio sprites with Seamlessloop.js
  • Focus on Play State II: Sensing Audio Readiness
  • Browser SupportPart 4: The Web Audio API
  • Anatomy of the Web Audio API
  • The Audio Context
  • Inputs and Audio Buffers
  • Doing Stuff with Audio Nodes
  • Outputting to Speakers
  • Manipulating a Loop
  • Focus on Synching Music with Animation
  • When to Use HTML5 Audio vs. Web Audio API

Part 5: Performance

  • Frames Per Second
  • Chrome's FPS Counter
  • Hardware Acceleration
  • Paint Rectangles
  • Investigating with Timeline
  • Part 6: Sass Animation Studio
  • Intro to Sass and Compass
  • Using the Sass Animation Studio Extension
  • Part 7: Where to go from here
  • People to Follow
  • Resources
  • Keeping in Touch