CSS3 – Transform/Transition/Animation


Transformationen

Mit Transformationen kann man Elemente drehen, verschieben und skalieren. Transformationen funktionieren in Chrome (Beta), Safari und Firefox 3.6.

1
2
3
4

#test1 {
	-webkit-transform: translate(80px, 0) rotate(-65deg) scale(1.5);
	-moz-transform: translate(80px, 0) rotate(-65deg) scale(1.5);
}

Transitions

Mit CSS-Transitions lassen sich flüssig animierte Übergänge zwischen zwei CSS-Angaben machen. Brauchbar für einfache Animationen, Farbübergänge (Hover-Effekte) usw. Transitions funktionieren derzeit nur mit Webkit, die nächste Version von Firefox wird auch Transitions unterstützen.

1
2
3
4
5
6
7

#test7 {
	background:#eee;
	-webkit-transition: background 2s;
}
#test7:hover {
	background: lime;
}

Animationen

Für komplexere Abläufe können in Zukunft auch Keyframe-Animationen definiert werden. Jede Animation bekommt einen eindeutigen Namen der via animation-Eigenschaft getriggert werden kann.

1
2
3
4
5
6
7
8
9
10
11

#test5:hover {
	-webkit-animation: 'wobble' 5s;
	-webkit-animation-iteration-count: infinite;
}		
@-webkit-keyframes 'wobble' {
	0% { -webkit-transform: translate(0, 0) rotate(10deg) scale(1); }
	25% { -webkit-transform: translate(0, 0) rotate(-10deg) scale(1.3); }
	50% { -webkit-transform: translate(0, 0) rotate(10deg) scale(1); }
	75% { -webkit-transform: translate(0, 0) rotate(-10deg) scale(0.7); }	
	100% { -webkit-transform: translate(0, 0) rotate(10deg) scale(1); }
}

Alle Beispiele ansehen, am Besten mit Chrome (Beta) oder Safari.

mehr Infos und Tutorials

Tags: , , ,