Comments on: CSS transitions in Gecko http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/ Bits on the rampage: Eric Shepherd's blog. Wed, 01 Feb 2012 14:15:55 -0500 hourly 1 http://wordpress.org/?v=3.3.1 By: Mozilla Firefox, enfin CSS Transitions | Un développement web http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/comment-page-1/#comment-84756 Mozilla Firefox, enfin CSS Transitions | Un développement web Thu, 11 Mar 2010 04:56:40 +0000 http://www.bitstampede.com/?p=1508#comment-84756 [...] 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 [...] [...] 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 [...]

]]> By: Mozilla Firefox, finally CSS Transitions | Web development http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/comment-page-1/#comment-84751 Mozilla Firefox, finally CSS Transitions | Web development Tue, 09 Mar 2010 17:55:21 +0000 http://www.bitstampede.com/?p=1508#comment-84751 [...] 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 [...] [...] 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 [...]

]]> By: Mozilla Firefox, ? ????? ?????? CSS Transitions | Veb razvitije http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/comment-page-1/#comment-84750 Mozilla Firefox, ? ????? ?????? CSS Transitions | Veb razvitije Tue, 09 Mar 2010 16:00:08 +0000 http://www.bitstampede.com/?p=1508#comment-84750 [...] Twitter ? ????????, ??? Firefox 3.7 (?????? pre-alpha2) ??? ????????? CSS Transtions. ???????, ? ??????? ??????????? ??????? CSS ?? ????? [...] [...] Twitter ? ????????, ??? Firefox 3.7 (?????? pre-alpha2) ??? ????????? CSS Transtions. ???????, ? ??????? ??????????? ??????? CSS ?? ????? [...]

]]> By: Mozilla Firefox endlich CSS Transitions | Web-Entwicklung http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/comment-page-1/#comment-84748 Mozilla Firefox endlich CSS Transitions | Web-Entwicklung Tue, 09 Mar 2010 06:32:34 +0000 http://www.bitstampede.com/?p=1508#comment-84748 [...] 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 [...] [...] 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 [...]

]]> By: Sylvain Pasche http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/comment-page-1/#comment-84716 Sylvain Pasche Tue, 23 Feb 2010 23:45:30 +0000 http://www.bitstampede.com/?p=1508#comment-84716 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 <code> .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; } </code> You would have <code> .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; } </code> 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;
}

]]> By: sheppy http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/comment-page-1/#comment-84713 sheppy Tue, 23 Feb 2010 17:29:55 +0000 http://www.bitstampede.com/?p=1508#comment-84713 Magne: Yes, once Firefox supports CSS animations, that last sample will be doable without "cheating" and using JavaScript. :) Magne: Yes, once Firefox supports CSS animations, that last sample will be doable without “cheating” and using JavaScript. :)

]]> By: » Easy easing gets easier; hard easing stays hard My Green Life http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/comment-page-1/#comment-84712 » Easy easing gets easier; hard easing stays hard My Green Life Tue, 23 Feb 2010 15:53:47 +0000 http://www.bitstampede.com/?p=1508#comment-84712 [...] 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 [...] [...] 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 [...]

]]> By: Mozilla Firefox, por fín CSS Transitions | aNieto2K http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/comment-page-1/#comment-84711 Mozilla Firefox, por fín CSS Transitions | aNieto2K Tue, 23 Feb 2010 10:11:40 +0000 http://www.bitstampede.com/?p=1508#comment-84711 [...] 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 [...] [...] 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 [...]

]]> By: Magne Andersson http://www.bitstampede.com/2010/02/22/css-transitions-in-gecko/comment-page-1/#comment-84710 Magne Andersson Tue, 23 Feb 2010 08:20:19 +0000 http://www.bitstampede.com/?p=1508#comment-84710 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. 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.

]]>