Web Animations sans-Flash
After ensuring that CSS animations can be made accessible and 508 compliant I can now begin to explore additional implementations.
In my recent post I linked to a page that uses CSS animation to move DOM elements onto the screen in a cascading manner, with items fading in while they moved into position onscreen. Here I've taken that a bit further.
I implement a looping CSS sprite animation as background to the hero section of my portfolio site, after first optimizing it in After Effects and with Adobe's Media Encoder before final sprite creation in Photoshop. It sits behind the header and floats to the right; maintaining responsiveness. It's highlighted in red at the top right of the included screen shot.
Video, via the video-tag, and some HTML5 programming, can also be used as background. This technique, however, is just recently being supported. Older browsers support it inconsistently; including older mobile browsers.
In the body of the pages of my portfolio site, I use thumbnail images of my apps, highlighted in red at the bottom of the included screen shot, and laid out in a fluid grid as a visual presentation and alternative navigation of the apps.
The thumbnails, on page load and refresh, fade-in while growing in size. Each grows to about 130% before falling back to 100%. They appear in random order, and with easing applied, you get an interesting 'popcorn' effect'