HTML5 animation and CSS filters

HTML5 animation and CSS filters

Predefined filter effects are now implemented in WebKit browsers (Chrome, Safari 6, iOS Safari 6, BB10 browser). You only have to set CSS properties to blur a DIV, drop a shadow, saturate an image (or the opposite with grayscale), or play with the opacity or the gamma (brightness) information. Then you can use CSS animations and transitions to create cinematic effects on your web pages.

Adobe is actively working with the W3C on CSS filters. Actually, this is just a start. Adobe is working on CSS Custom Filters that will unleash our creativity in modern browsers. You should read this great article by Vincent Hardy on CSS custom filters.

Edge Animate 1.5

New panel on the left of the screen: Filters.

New panel on the left of the screen: Filters.

The latest release of Adobe Edge Animate (version 1.5 – Feb 2013) lets you play and animate CSS filters. Once you’re aware that these CSS properties won’t work on all browsers (you can check the browser’s compatibility on caniuse.com), you can have a lot of fun and create stunning animations. Here are some experiments I’ve made with filters.

Simple animation with Edge Animate 1.5

Here is a short video tutorial that explains how to create a simple animation with Edge Animate and CSS Filters.

Roll-over buttons

Adding a blur filter, you can easily simulate a depth of field. Roll over one of these blue squares:

I’ve seen several ways on the web to create rollover buttons. In this case, I’m using the famous “play reverse” function of the Edge framework. There is just a symbol, with a square (you can create CSS gradients with Edge Animate now), and a simple “scale up” animation. I have a “stop” at the end of my animation, and two JavaScript calls:

  • on mouse over: this.play()
  • on mouse out: this.playReverse();
Just declare a "one-way" animation, and use playReverse().

Just declare a “one-way” animation, and use playReverse().

Click here to download the Edge Animate project: http://creativedroplets.com/samples/edge-animate-filters/four-buttons.zip

Animated logo

In this animation, I’m using the grayscale filter on the cloud, fading to the colored version. When the logo appears, I’m adding a smooth blur filter at the beginning of my fading transitions.

Click here to download the Edge Animate project: http://creativedroplets.com/samples/edge-animate-filters/logo-filters.zip

Cinematic trailer

Again, playing with the blur filter (my favorite one). I’ve produced this trailer for an imaginary movie starring Thibault Imbert. In this animation, I’m using the Adobe Edge Web Font “days-one”. The free Edge Web fonts are directly available through the interface of Edge Animate. For this trailer, I’m playing with a lot of filters: blur, grayscale, contrast, and drop shadow. I need to add a soundtrack :) Maybe in a future tutorial, I’ll explain how to sync sound with an Edge animation.

Click here to download the Edge Animate project: http://creativedroplets.com/samples/edge-animate-filters/movie-trailer.zip

Have fun with filters !

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

2 Comments

  1. Although you mention it in the introduction, 14.6. opacity and 14.7. brightness (from w3’s draft) don’t have (yet) a slider in the animate panel, which is quite sad due to the incompatibility of filters and box opacity…

    • yeah that’s a shame. Gamma is nice a option though to play with brightness.

Submit a Comment

Your email address will not be published. Required fields are marked *