Showing posts with label Animation. Show all posts
Showing posts with label Animation. Show all posts

Thursday, October 18, 2012

How to capture CSS3 animation events in JavaScript


CSS3 animation events

CSS3 animations are smooth and quick to implement but, unlike JavaScript, you don't have frame-by-frame control. Fortunately, you can apply event handlers to any element to determine the animation state. This permits fine-grained control such as playing different animations in sequence.

Thursday, September 27, 2012

Making a loading icon in just CSS!

loading icon

This is a little something I made in my spare time, just for a bit of fun. It was excruciatingly time consuming as I felt the easiest way to do it was to make individual bars and rotate them into the right position. The pain of changing left by 2% was almost excruciating. I used percentages in particular as I felt I wanted it to be resizeable in an easy way (it would have to be, changing the size manually is perhaps the most soul destroying endeavour you might ever lead yourself onto do). Anyway, onward with the understanding.

Thursday, September 27, 2012

Create a CSS flipping animation

Create a CSS flipping animation

CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.

Friday, September 21, 2012

Timed notifications with CSS animations

notifications

A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and then make it disappear.

Friday, September 21, 2012

Nifty hover effects with CSS3 animations

hover effects

The idea was to create two different kinds of animations for both hover over and over out with just CSS3. The over out animation shouldn't be the reverse version of animation for hover over.

Friday, September 21, 2012

Animating CSS3 image filters

Animating CSS3 image filters

In recent articles I've shown how to create cross-browser image filter effects with CSS and SVG: converting color photographs to black and white and sepia-tone, as well as blurring them. The next obvious step is to animate these effects.