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. I’ve already put CSS3 to work at JournalXtra. The curved borders on some of the page elements, the popup search box in the sidebar and the spinning ad images. I’m looking forward to doing more with it.

These examples work with Chrome and Firefox on Linux and Windows. They should work in Safari. My current version of Crashed. Internet Explorer 9 should display the animations but we all know what Microsoft is like ;) Let me know how they work on your setup.

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

The above animation uses two separate images. The first image is of Dilbert without a tie. This is the background image of a <div> container. The second image is Dilbert’s tie. This image 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 it’s hovered over.

The CSS

.dilbert-container {
width: 100%;
height: 633px;
padding: none;
margin-left: auto;
margin-right: auto;
}

.dilbert-background-image {
position: absolute;
left: 15%;
width: 400px;
height: 633px;
padding: none;
background-image: url('http://journalxtra.com/wp-custom/uploads/2011/11/Dilbert-Underlay.png');
}

.dilbert-overlay {
style="width: 108px;
height: 177px;
position: relative;
top: 114px;
left: 146px;
}

.dilbert-overlay:hover {
-webkit-animation: spin 0.7s infinite linear;
-moz-animation: spin 0.7s infinite linear;
-o-animation: spin 0.7s infinite linear;
-ms-animation: spin 0.7s infinite linear;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}

The HTML

<div class="dilbert-container">

<div class="dilbert-background-image">

<img class="dilbert-overlay" src="http://journalxtra.com/wp-custom/uploads/2011/11/dilbert-overlay.png" alt="" />

</div>
</div>

There’s a lot of CSS because different browsers use different prefixes for their CSS3 property selectors. Use separate style-sheets for your animations and only load them into the pages the animations they effect play on. WordPress users can do this with the Per Post Script and Styles plugin.

Here are four more examples: a spinning hypnotic disc, a breathing hypnotic disc and a spinning, breathing hypnotic disc (a kinda dysfunctional one that does different things in different browsers) and a  fully functional spinning, breathing hypnotic disc. All done with CSS3. No JS or other trickery involved.

Disc 1: CSS3 Animated Spinning Disc

Disc 2: CSS3 Animated Breathing Disc

Disc 3: Dysfunctional CSS3 Animated Spinning, Breathing Disc

Disc 4: Functional CSS3 Animated Spinning and Breathing Disc

Now you’re hypnotized and completely under my control…. Get your bank card out and send me a donation :-D

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:

<img class="spinning-hypnotic-disc" src="http://journalxtra.com/wp-custom/uploads/2011/11/hypnotic-spiral.png" />

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

<div class="breathing-hypnotic-disc"><img class="spinning-hypnotic-disc" src="http://journalxtra.com/wp-custom/uploads/2011/11/hypnotic-spiral.png" width="400" height="400" /></div>

The CSS for all 4 discs

.spinning-hypnotic-disc:hover
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
}
@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}

.breathing-hypnotic-disc:hover
{
-webkit-animation: breathe 5s infinite ease-in-out alternate;
-moz-animation: breathe 5s infinite ease-in-out alternate;
-o-animation: breathe 5s infinite ease-in-out alternate;
-ms-animation: breathe 5s infinite ease-in-out alternate;
animation: breathe 5s infinite ease-in-out alternate;
}
@-webkit-keyframes breathe {
0% { -webkit-transform: scale(1);}
100% { -webkit-transform: scale(.5);}
}
@-moz-keyframes breathe {
0% { -moz-transform: scale(1);}
100% { -moz-transform: scale(.5);}
}
@-o-keyframes breathe {
0% { -o-transform: scale(1);}
100% { -o-transform: scale(.5);}
}
@-ms-keyframes breathe {
0% { -ms-transform: scale(1);}
100% { -ms-transform: scale(.5);}
}
@-keyframes breathe {
0% { transform: scale(1);}
100% { transform: scale(.5);}
}

.contracting-spinning-hypnotic-disc:hover
{
-webkit-animation: spin2 2s infinite linear, spin2 5s infinite ease-in-out alternate;
-moz-animation: spin2 2s infinite linear normal, 5s infinite ease-in-out alternate;
-o-animation: spin2 2s infinite linear, spin2 5s infinite ease-in-out alternate;
-ms-animation: spin2 2s infinite linear, spin2 5s infinite ease-in-out alternate;
animation: spin2 2s infinite linear, spin2 5s infinite ease-in-out alternate;
}
@-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg) scale(1);}
100% { -webkit-transform: rotate(360deg) scale(.5);}
}
@-moz-keyframes spin2 {
0% { -moz-transform: rotate(0deg) scale(1);}
100% { -moz-transform: rotate(360deg) scale(.5);}
}
@-o-keyframes spin2 {
0% { -o-transform: rotate(0deg) scale(1);}
100% { -o-transform: rotate(360deg) scale(.5);}
}
@-ms-keyframes spin2 {
0% { -ms-transform: rotate(0deg) scale(1);}
100% { -ms-transform: rotate(360deg) scale(.5);}
}
@-keyframes spin2 {
0% { transform: rotate(0deg) scale(.5);}
100% { transform: rotate(360deg) scale(1);}
}

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.

How it Works

I’ll leave you to work it out by reading the example HTML and CSS. I will write short follow up articles to provide explanations, though this will be when I’m less busy installing and migrating WordPress sites for clients.

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

Enjoy!

Copyright secured by Digiprove © 2011Some Rights Reserved

Want to republish this content? Read the copyright notice first.. If you like it, support it.