CSS3 Transitions

Tanja — Thu, 17 Jun 2010 15:30:09 +0000

Via de oogverblindende post over transitions op Trent Walton’s blog ben ik terecht gekomen op de uiterst bruikbare uitleg van Net Tuts over CSS3 transitions. Hoe Trent zijn header zo heeft geanimeerd (een animerende div met een semi transparante achtergrond?) ben ik nog niet achter.

Hover this… (en de code)

a{
color: #fe2b76;
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
transition:color 1s ease-in;
}

a:hover{
color: #88083a;
}

Let op: De -webkit toevoeging werkt alleen op Chrome en Safari vandaar deze workaround die meeste browsers zullen ondersteunen.

Bron:
net.tutsplus.com: css-fundametals-css-3-transitions
trentwalton.com: css3-in-transition

Tanjadebie.nl » css

CSS3 Transitions

Hover this… (en de code)