CSS3 transitions to go – CSS3 Adventskalender Tag 9

Transitions ist auch heute wieder Thema im CSS3 Adventskalender. Am Tag 4 zeigte Heiko im Webstandard-Blog am Beispiel eines Call-to-Action Button was man mit Transion und Transform mit CSS3 für Effekte erziehlen kann. Seit der Einführung von -moz-transition im Firefox 4 konnten Transitions endlich mehr verwendet werden, da der Browsermarkanteil der unterstützenden Browser enorm gestiegen ist. Auf die detailierte Funktionweise möchte ich heute nicht weiter eingehn, das war ja schon Thema im letzten Jahr.

Vielmehr gibt es heut ein paar Snippets um :hover-Transitions auf Bildern zu animieren. Doch nur nochmal zur Erinnerung, transitions können auch auf andere dynamische Pseudoklassen wie :active, :focus, :target, :disabled, etc., aber auch auf @media-Queries angewendet werden. Schaut durch die Demo – durch CSS3 werden nun einige jQuery Animation überflüssig.

image transition Demo – auf das Bild klicken ;)

CSS-Datei aus der Demo zum Download

Tools:

Ceaser – CSS Easing Animation Tool (matthewlein.com/ceaser/)

cubic-bezier.com (cubic-bezier.com)

Link Tipps:

CSS Transitions 101 (www.webdesignerdepot.com/2010/01/css-transitions-101/)

Let the Web move you — CSS3 Animations and Transitions (www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/)

Introduction to CSS3 Transitions (via @Flocke)

Browser-Support

Alle Browser verwenden noch die jeweiligen Vendor-Prefixe, z.B. -moz-transition. Der Internet Explorer unterstütz CSS3 transitions ab IE10.

3 thoughts on “CSS3 transitions to go – CSS3 Adventskalender Tag 9”

  1. Moin moin,

    jeden Tag wieder eine gute Idee für meine kommenden Aufgaben. Danke. Besonders das Erzeugen eines Eck- oder Schatten-Effects kommt immer wieder gut an und wird bei mir verbaut. Wie einfach doch heute vieles ist…. *mal ein paar Jahre in Gedanken zurückblickt…

Kommentare sind geschlossen.