Wie man CSS3 Übergänge verwendet

Jeder liebt Bewegung. Das Hauptaugenmerk des Screen-Based-Designs auf das Print-Design ist das Hinzufügen der vierten Dimension (Zeit) zu einem Site-Design. CSS-Übergänge sind eine einfache Methode zum Animieren von Eigenschaften eines Elements, mit der Sie bestimmte Ereignisse in Ihrem Webdesign ohne die Verwendung von Flash oder JavaScript anreichern können.

Das W3C beschreibt treffend Übergänge auf ihrer Website, da "CSS Transitions es ermöglicht, dass Eigenschaftsänderungen in CSS-Werten über eine bestimmte Dauer reibungslos ablaufen". Mit anderen Worten, CSS-Übergänge ermöglichen es uns, eine Eigenschaft inkrementell zu verändern, ein Gefühl von Bewegung zu erzeugen und Designs mit Subtilität und Emotion zu versehen, die mit einer schnellen Änderung nicht möglich sind.

Browserunterstützung

Alle modernen Browser (ja sogar IE!) Unterstützen jetzt CSS-Übergänge. Wenn jedoch Übergänge in dem verwendeten Browser nicht unterstützt werden, wird der Übergang ignoriert und die Eigenschaftenänderungen werden sofort übernommen. Dieser graziöse Abbau ist ein Eckpfeiler der Best Practice.

Um den Umfang der Browser-Unterstützung zu erweitern, können wir Hersteller-Präfixe verwenden. Dies erweitert die Funktion um Firefox 4-15, Opera 10.5-12 und die meisten Versionen von Chrome und Safari. Der Code, einschließlich der Anbieterpräfixalternativen, sieht folgendermaßen aus:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

Die Eigenschaft ohne Präfix wird am Ende des Stapels hinzugefügt, um sicherzustellen, dass die endgültige Implementierung alle anderen übertrumpft, wenn die Eigenschaft vom Entwurf zum fertigen Status wechselt.

Übergangsparameter

Es gibt vier Parameter für CSS-Übergänge:

• transition-property: die Eigenschaft, die getweent werden soll, oder das Schlüsselwort 'all', das auf alle Eigenschaften angewendet wird;
• Übergangsdauer: die Dauer des Übergangs;
• Übergangs-Timing-Funktion: Die zu aktivierende Lockerung bewirkt eine natürlichere Bewegung
• Übergangsverzögerung: Gibt eine Verzögerung bis zum Beginn des Übergangs an.

Darüber hinaus können Sie auch die Kurzschrifteigenschaft verwenden (wie im obigen Beispiel), in der die Parameter als Eigenschaft, Dauer, Zeitfunktion, Verzögerung angegeben sind.

Eigenschaften, die umgestellt werden können

Sie können nur Eigenschaften umstellen, die in einen mathematischen Wert übersetzt werden können. So können Sie beispielsweise die Schriftgröße ändern; Sie können die Schriftart nicht ändern.

Die vollständige Liste der Eigenschaften, die derzeit umgestellt werden können, lautet wie folgt:

Hintergrund-Position, Grenze-Unten-Farbe, Grenze-Unten-Breite, Grenze-Links-Farbe, Grenze-Links-Breite, Grenze-Rechts-Farbe, Grenze-Rechts-Breite, Grenz-Abstand, Grenz-Oben-Farbe, border-top-width, bottom, clip, farbe, font-size, font-weight, höhe, links, brief-spacing, margin-bottom, margin-left, margin-right, margin-top, max-height, max- width, min-height, min-width, opacity, Umrissfarbe, outline-width, padding-bottom, padding-left, padding-right, padding-top, right, Text-indent, text-shadow, top, vertical- Ausrichtung, Breite, Wortabstand, Z-Index.

Übergänge verwenden

Übergangsdeklarationen sind an den Normalzustand des Elements angehängt. Daher nur einmal für mehrere Zustände deklariert wie: Fokus,: aktive und Pseudo-Klassen.

Mit dem folgenden Code können wir ein einfaches Menü und einen Textabschnitt einrichten. Es ist so gestaltet, dass die Menüelemente beim Überrollen ihre Farbe und Hintergrundfarbe ändern und der Inline-Link seine Unterstreichungsfarbe beim Überfahren von weiß nach grün ändert:

Business
  Code 
  Design 
  Inspiration 
  Sonstiges 
  Handy, Mobiltelefon 
  Nachrichten 
  Ressourcen 
  Benutzerfreundlichkeit 
  Integer positioniere einen ante inline link   venenatis dapibus posuere velit aliquet.  Nurlam id dolor id nibh ultricies vehicula ut id elit.  Integer posuere erate a ante vénatisis dapibus posuere velit aliquet.  Nurlam quis risus eget urna mollis ornare vel eu leo. 

So sieht es aus:

Verwenden Sie CSS3-Übergänge? Welche Effekte haben Sie erschaffen können? Lassen Sie es uns in den Kommentaren wissen.

Vorgestelltes Bild / Thumbnail, Bewegungsbild über Shutterstock.