Übergang
Ein grundlegender Übergang mit CSS-Eigenschaften besteht darin, ein Element zu definieren und von seinem Ruhezustand (z. B. einem dunkelblauen Hintergrund) in seinen schwebenden oder aktiven Zustand (z. B. einem hellblauen Hintergrund) zu verschieben.
Transformationen können zusammen mit Transformationen (sowie dem Auslösen von Ereignissen wie :hover oder :focus) verwendet werden, um einige Animationen zu erstellen. Blenden Sie eine Hintergrundfarbe aus, verschieben Sie ein Element und drehen Sie ein Objekt – alles mit CSS-Übergängen.
Nachfolgend der zitierte Inhalt: #nav a{ Hintergrundfarbe:rot } |
Einige zu konvertierende Parameter
Übergangseigenschaft
Geben Sie den CSS-Eigenschaftsnamen der Transformation an. Im obigen Beispiel wird die Transformation beispielsweise auf die Eigenschaft „Hintergrundfarbe“ angewendet.
Übergangsdauer
Definieren Sie die Zeit, die für die Konvertierung benötigt wird (die Zeit, die für den Wechsel vom alten Attribut zum neuen Attribut benötigt wird).
Übergangs-Timing-Funktion
Kann als übermäßiger Effekt verstanden werden. Gibt den Zwischenwert während der Konvertierung an. Kann mit Kubikbezier angegeben werden. Es gibt natürlich mehrere häufig verwendete Werte: „ease-in-out“ |
Übergangsverzögerung
Dies ist leichter zu verstehen, es handelt sich um die Konvertierungsverzögerungszeit. Die Zeit kann eine positive Ganzzahl, eine negative Ganzzahl oder Null sein. Wenn sie ungleich Null ist, muss die Einheit auf s (Sekunden) oder ms (Millisekunden) eingestellt werden Zu diesem Zeitpunkt wird die vorherige Aktion abgeschnitten.
Hinweis: Der Parameterteil wurde während der Übersetzung hinzugefügt und ist nicht im Originaltext enthalten.
Browserunterstützung
So cool wie das Transformationsattribut, aber derzeit nur von WebKit-Browsern unterstützt. -moz-transition ist bereits in den neuesten Nightly-Build-Versionen von Firefox 3.7 verfügbar. Sie können für zukünftige Verbesserungen auch -moz-transition zu Ihrem CSS hinzufügen. Für alle Fälle können Sie sogar eine Eigenschaft ohne das private Präfix hinzufügen.
Animation
Bei Animationen ist CSS 3 am nützlichsten. Sie können alle oben besprochenen Elemente mit Animationseigenschaften wie Animationsdauer, Animationsname und Animations-Timing-Funktion kombinieren, um Effekte wie Flash-Animationen zu erstellen – reines CSS.
Nachfolgend der zitierte Inhalt: #drehen { |
Dieser fantastische CSS-Animationscode und die Online-Demo sind auf der Webkit -Website zu sehen. Die Demo kann auf jeder Website angezeigt werden, der Animationseffekt ist jedoch nur in der Nightly Build-Version von WebKit auf Mac OS (Snow Leopard) sichtbar. Es sieht genauso aus wie im Video oben, und wenn Sie Mac OS (Snow Leopard-Version) verwenden, lohnt es sich meiner Meinung nach, ein Webkit zu installieren, um den Effekt selbst zu sehen (es ist wirklich cool). Benutzer von Windows-Systemen können diesen Effekt vorübergehend nicht wahrnehmen.
Einige Parameter der Animation
Die Parameter der Animation ähneln in gewisser Weise denen der Übersetzung. Wenn Sie also die Parameter der Übersetzung verstehen, ist es hier nicht schwer, sie zu verstehen.
Animationsname
Der Name der Animation.
Animationsdauer
Definieren Sie die Zeit, die erforderlich ist, damit die Animation einmal abgespielt wird. Der Standardwert ist 0;
Animation-Timing-Funktion
Definieren Sie die Art und Weise, wie die Animation abgespielt wird. Die Parametereinstellungen ähneln der Übergangs-Timing-Funktion.
Animationsverzögerung
Definieren Sie, wann die Animation startet
Anzahl der Animationsiterationen
Definieren Sie die Anzahl der Schleifen. Unendlich bedeutet unbegrenzte Zeiten. Der Standardwert ist 1.
-Webkit-Animationsrichtung
Die Richtung der Animationswiedergabe, zwei Werte, der Standardwert ist normal. Zu diesem Zeitpunkt wird jeder Animationszyklus vorwärts abgespielt. Der andere Wert ist alternierend, dann werden die geraden Zeiten vorwärts und die ungeraden Zeiten rückwärts abgespielt.
Browserunterstützung
Leider unterstützen derzeit nur wenige Browser CSS-Animationen. 2D-CSS-Animationen funktionieren in Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira und anderen Webkit-Browsern. Safari 4 (Snow Leopard) unterstützt 3D-Animationen.