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
.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('https://journalxtra.com/wp-content/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="https://journalxtra.com/wp-content/uploads/2011/11/dilbert-overlay.png" alt="" /> </div> </div>
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:
- a spinning hypnotic disc
- a breathing hypnotic disc
- a spinning, breathing hypnotic disc (a kinda dysfunctional one that does different things in different browsers),
- and a fully functional spinning, breathing hypnotic disc.
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
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="https://journalxtra.com/wp-content/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="https://journalxtra.com/wp-content/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.
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!
wpDiscuz