Safari 3: Demonstration von -webkit transitions

Stu Nicchols hat aus dem neuen Safari-Browser wieder mal einige Sachen rausgekitzelt: z.B. einen Zoom-Effekt für Bilder. Bisher ist das leider nur eine proprietäre CSS-Erweiterung von Apple, bei anderen aktuellen Browsern wird einfach nur das Bild vergrößert, bei IE6 passiert (wieder mal) einfach nullkommanix.

Der CSS-Code:

#enlarge {
  -webkit-transition-property: margin-left, border-color, width, height, position, z-index;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  border: 2px solid #080;
  width:64px; height:46px;
  position:relative; z-index:1;
}
#enlarge:hover {
  margin-left: 0;
  width: 640px;
  height: 460px;
  border-color: #c00;
  position:relative; z-index:500;
}

Der HTML-Code:

<img alt="The Haywain" id="enlarge" src="haywain.jpg"/>

Ja, und natürlich fällt der CSS-Code bei der Validierung gnadenlos durch, trotzdem zeigt dieses Beispiel gut welches Potential noch in den zukünftigen CSS-Entwicklungen steckt.