CSS3 Animated Spinning Things!

I learned a new trick this week and I’m pretty impressed with myself. I learned how to use CSS3 to animate page elements. With the tricks I learned at The Art of Web and Web Development Blog, I can make any HTML page element move around, expand and spin when touched by a mouse cursor. I’ve even figured out how to combine animations.

The following shows a few examples of what can be done with CSS3. Nothing spectacular but it’ll entertain you for a few minutes but I know Dilbert fans and insomniacs will love these neat animations.

These examples CSS3 animations will work in most modern web browsers (compatibility chart here).

Hover your cursor over Dilbert’s tie in the picture below to see some of what I’ve been experimenting with. More animations follow this one.

The above animation uses two separate images. The first image is of Dilbert without his tie. This image is a background image in a div container. Dilbert’s tie is the second image. The tie is in an img tag positioned just over his shirt collar. I’ve used the CSS3 transform and animation properties to rotate the tie when rolled over with a mouse cursor.

The CSS

The HTML

There’s a lot of CSS because different browsers use different CSS3 property selectors. Use separate style-sheets for your animations and only load them into the pages the animations are on. WordPress users can put scripts into specific pages by using a plugin like Per Post Script and Styles.

Here are four more animation examples:

  1. a spinning hypnotic disc
  2. a breathing hypnotic disc
  3. a spinning, breathing hypnotic disc (a kinda dysfunctional one that does different things in different browsers),
  4. and a  fully functional spinning, breathing hypnotic disc.

Disc 1: CSS3 Animated Spinning Disc

Spinning Hypnotic Spiral

Disc 2: CSS3 Animated Breathing Disc

Spinning Hypnotic Spiral

Disc 3: Dysfunctional CSS3 Animated Spinning, Breathing Disc

Spinning Hypnotic Spiral

Disc 4: Functional CSS3 Animated Spinning and Breathing Disc

Spinning Hypnotic Spiral

You can find an explanation for the different CSS3 selectors by following the links in the resources section and by reading the CSS for the spinning discs and Dilbert’s spinning tie.

The first three discs use essentially the same HTML as each other. The only difference being the CSS classes. In order of appearance, those classes are spinning-hypnotic-disc, breathing-hypnotic-disc and contracting-spinning-hypnotic-disc:

The fourth disc has a  slightly different HTML. I had to animate two different elements to get it to simulate the appearance of two different animations. The image container is a <div> element that is animated to breathe. The image itself is animated to rotate. The combined effect is that of a singular spinning and rotating object. It took a bit of playing to figure out I couldn’t properly add multiple animations to one HTML element.

Strange things happen when an animated item lacks defined boundaries within a page. When the HTML and CSS of any one of the spinning discs is put into an a empty web page without a defined container div, they don’t just rotate, they roll; or at least they do in Firefox. This can be put to good effect. For example, when “postion: absolute; left xx; top xx;” are used to define a starting position for one of the animated elements of the fourth disc… I won’t spoil it for you by giving away the ending. I was entertained by it in Firefox with the Web Developer Extension.

The HTML for the final disc

The CSS for all 4 discs

The fourth disc, the breathing, spinning animated disc uses the CSS classes of the 1st and 2nd discs. The <div> breathes and the <img> rotates. I’ll let you piece together the exact details.

Resources

Excellent resources that are well worth a read.

The Art of Web for examples and explanations

Web Development Blog for 15 simple animation code snippets

Hakoniemi has a good demonstration of making a CSS3 icon

CSS Tricks has a good, short explanation of CSS3 syntax

Here’s  a handy online CSS3 animation generator to  play with

A short animation made with CSS3.

Enjoy!

Comments

    • says

      CSS3 is not implemented in all browsers without plugins being added to them or Javascripts being added to pages that use CSS3. Older browsers, especially IE varieties, are particularly bad for not supporting CSS3 or for supporting only certain elements of CSS3.

  1. originalUG says

    I cant seem to get it to work. The image shows up but it will not spin when i hover my mouse over it. help me!!!

  2. Mikkel says

    Thanks, this was very useful.
    Also, a tip: To change the way it spins replace all numbers of 0 with 360 and all numbers with 360 with 0.

    Eh, yeah.

Leave a Reply