Current Firefox nightlies have support for the bleeding-edge CSS transitions specification. I’ve spent the last few days playing with this feature, and have written some examples as well as reference and how-to documentation for using them.
CSS transitions make it easy to smoothly animate changes to CSS styles, instead of changes taking effect instantly. With a number of ways to control and customize the transition effect, and support for everything from font size and style to colors and even position, you can create some impressive effects with very little work. I suggest taking a look at the demos I put together to get a good idea what you can do.
Obviously since CSS transitions are still in the Working Draft stage, it’s entirely possible the syntax could change, but this is a great way to easily add a little pizazz to your web content.
Looking good, I’ve tried many things myself and have usually gotten a nice result. I feel that it is a bit wrong to involve JavaScript at the last example though, as that is replacing what CSS Animation is meant to do, which only Webkit browsers support so far. “Cheating” with JavaScript is OK, as long as you don’t support CSS Animation, but I wouldn’t recommend doing it when CSS Animation is available.
Magne: Yes, once Firefox supports CSS animations, that last sample will be doable without “cheating” and using JavaScript. :)
Great work. I have a suggestion for the samples, which I think should improve readability/maintainability of the CSS. Put the declarations that are common to several rulesets in a dedicated ruleset with a grouping selector. That should be easier to understand with an example:
Instead of
.menuButton {
position: relative;
-moz-transition-property: background-color, color;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color, color;
-o-transition-duration: 1s;
text-align: left;
background-color: grey;
left: 5px;
top: 5px;
height: 26px;
color: white;
border-color: black;
font-family: sans-serif;
font-size: 20px;
text-decoration: none;
-moz-box-shadow: 2px 2px 1px black;
padding: 2px 4px;
border: solid 1px black;
}
.menuButton:hover {
position: relative;
-moz-transition-property: background-color, color;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color, color;
-o-transition-duration: 1s;
background-color:white;
color:black;
-moz-box-shadow: 2px 2px 1px black;
}
You would have
.menuButton, .menuButton:hover {
position: relative;
-moz-transition-property: background-color, color;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-webkit-transition-property: background-color, color;
-webkit-transition-duration: 1s;
-o-transition-property: background-color, color;
-o-transition-duration: 1s;
-moz-box-shadow: 2px 2px 1px black;
}
.menuButton {
text-align: left;
background-color: grey;
left: 5px;
top: 5px;
height: 26px;
color: white;
border-color: black;
font-family: sans-serif;
font-size: 20px;
text-decoration: none;
padding: 2px 4px;
border: solid 1px black;
}
.menuButton:hover {
background-color:white;
color:black;
}