HTML and CSS Reference
In-Depth Information
background:yellow;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spin {/* Opera */
from {
background:black;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} to {
background:yellow;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id='square'></div>
</body>
</html>
OK, let's break down this example. First, let's set up the HTML document, then include some CSS to target the
div
by the ID “square” by writing
#square
{. . .}; nothing new there. Now give the square a background color of black
and a width and height of 50 pixels. Finally and most importantly, make an animation called “spin” with a duration
of 15 seconds and a repetition of “infinite”. Now, using CSS3, declare the spin animation by using the
@keyframes
rule. Inside the rule, define its start (“from”) and end (“to”) by animating the square and rotating it 360 degrees. (I am
including the necessary prefixes since I am working across all browsers, but keep in mind that the final specification
will not include the prefix. However, browsers may still support it for backwards compatibility so no code breaks in the
future.) Finally, open this in your browser—that's it! This is pretty amazing stuff from just using straight CSS.
There are a few things to note when using CSS animations. For starters, they cannot stack—that is, you cannot
have an animation called “wiggle” and apply an animation called “spin” and have them animate at the same time.
Only the last-applied animation, in this case “spin“, will get applied to the DOM object you're targeting (note that this
could very well change as the spec finalizes, but at the time of writing, this was how it was in the browsers I've tested).
Also, when using CSS3 animations, you may notice a slight flicker to your screen when the animation is applied and
when it finishes. This is the browser leveraging on the machine's GPU for handling the animation. It's a bug, if you
ask me, and it requires a hacky workaround. The hack that seems to work best is applying a z index to your transform,
even if you don't intend to animate in the (3D) z space. Including the z-axis property enables hardware acceleration
(GPU) initially and eliminates the screen flicker when animation occurs. (If you're into the seizure effect, this won't
matter much to you, although your clients may ask for it to be removed.)
