Sexy Interactions with CSS Transitions

While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification.With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.There is only one problem: many of us have never created animations in JavaScript, Flash or some other environment before, and are therefore not as well-versed in the unwritten rules of the animation world…

CSS3 Transition-Delay

In another round of CSS3 experimentation, I wanted to see if it was possible to sequentially transition the opacity of 3 or more elements via CSS without having them all begin fading at once. While it seems painfully obvious now, I wasn’t aware that the transition-delay property existed. It’s currently compatible with webkit browsers like Safari or Google Chrome…

CSS3 In Transition

With the addition of the CSS3 transition property comes a lot of uncharted territory. Never before has it been so easy to bring animation into a usable, standards-based browsing environment. Determining how often and to what degree one should use animation on a web build can be tricky. As we evaluate how to implement animations from project to project, we’ll need to carefully consider how it might affect user experience. Here are a few observations I’ve made from the field…

Use CSS3 to Create a Dynamic Stack of Index Cards

Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features including DesignLovr we hardly ever see the full potential of what can be achieved with CSS3.Today we’re going to take a step into that direction and discover some of the possibilities CSS3 gives us.We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition for the dynamic effects and @font-face, box-shadow and border-radius for the styling…