CSS transitions in Gecko
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.
February 23rd, 2010 at 3:20 AM
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.
February 23rd, 2010 at 5:11 AM
[...] Twitter descubro que Firefox 3.7 (la versión pre-alpha2) ya dispone de CSS Transtions. El sistema con el cual mediante sentencias CSS podemos aplicar movimiento a elementos HTML de [...]
February 23rd, 2010 at 10:53 AM
[...] been experimentally implemented in Opera, Webkit (Safari, Chrome and Konqueror amonst others) and in nightly builds of Firefox (with documentation on the ever useful devmo). CSS transitions provide a declarative way to animate [...]
February 23rd, 2010 at 12:29 PM
Magne: Yes, once Firefox supports CSS animations, that last sample will be doable without “cheating” and using JavaScript.
February 23rd, 2010 at 6:45 PM
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;
}
March 9th, 2010 at 1:32 AM
[...] Twitter decke ich auf, dass Firefox 3.7 (die Version pre-alpha2) schon von CSS Transtions anordnet. Das System, mit dem wir mittels der Urteile CSS Bewegung auf Elemente HTML unserer Seite anwenden [...]
March 9th, 2010 at 11:00 AM
[...] Twitter ? ????????, ??? Firefox 3.7 (?????? pre-alpha2) ??? ????????? CSS Transtions. ???????, ? ??????? ??????????? ??????? CSS ?? ????? [...]
March 9th, 2010 at 12:55 PM
[...] Twitter I discover that Firefox 3.7 (the version pre-alpha2) already arranges of CSS Transtions. The system with which by means of judgments CSS we can apply movement to elements HTML of our [...]
March 10th, 2010 at 11:56 PM
[...] voie Twitter je découvre que Firefox 3.7 (la version pre-alpha2) dispose déjà de CSS Transtions. Le système avec lequel grâce à des sentences CSS nous pouvons appliquer un mouvement à des [...]