February 14, 2010

, , ,

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

Related Posts

1 Kommentar

  1. cliparts says:
    3. March 2010 at 14:15

    Er zijn veel animatiefilms over de jaren en dit is niet Te verwarren met de Meer gebruikte stop animatie. Model animatie is een vorm van de stop-motion animatie, maar het is ontworpen Om Te fuseren aan bij de live cliparts action beelden Om een illusie van een echte wereld volgorde te maken. Dus wat zijn de beste die ooit gemaakt

Neuer Kommentar