Was sind Übergang, Transformation und Animation in CSS3? Der Unterschied zwischen den dreien

In diesem Kapitel erfahren Sie, was Übergang, Transformation und Animation in CSS3 sind. Der Unterschied zwischen den dreien. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Übergang

Übergang ermöglicht einen reibungslosen Übergang von CSS-Attributwerten innerhalb eines bestimmten Zeitintervalls wie folgt:

transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

Verwandte Eigenschaften des Übergangs:

1. transition-property: wird verwendet, um die Eigenschaft zum Ausführen des Übergangseffekts anzugeben, der „keine“, „alle“ oder „spezifisch“ sein kann Eigenschaften.

2. Übergangsdauer: die Dauer der Animationsausführung, in s (Sekunden) oder ms (Millisekunden).

3. Übergangs-Timing-Funktion: Transformationsrateneffekt, optionale Werte sind Ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier (benutzerdefiniert Zeitkurve).

4. Übergangsverzögerung: Wird verwendet, um die Zeit anzugeben, zu der die Animation ausgeführt wird. Der Wert ist derselbe wie die Übergangsdauer, kann jedoch eine negative Zahl sein.

Transformation

Transformation ist in 2D und 3D unterteilt. Hier stellen wir nur die häufiger verwendete 2D-Transformation vor. Das Wichtigste umfasst die folgenden Transformationen: Drehung, Verzerrung, Skalierung und Übersetzung sowie Matrixtransformationsmatrix. Die Syntax lautet wie folgt:

transform: rotate | scale | skew | translate |matrix;

Verwandte Eigenschaften der Transformation:

1. Drehung drehen
   Die Einheit der Drehung ist Grad, eine positive Zahl bedeutet eine Drehung im Uhrzeigersinn, eine negative Zahl bedeutet eine Drehung gegen den Uhrzeigersinn.

2. scale Scale Der Wertebereich von
   scale ist 0~n. Wenn er kleiner als 1 ist, bedeutet dies, ihn zu verkleinern, andernfalls bedeutet er, ihn zu vergrößern. Beispielsweise bedeutet „scale(0.5, 2)“, dass die horizontale Richtung um das 1-fache verkleinert und die vertikale Richtung um das 1-fache vergrößert wird. Darüber hinaus kann eine Richtung auch über „scaleX“ oder „scaleY“ festgelegt werden.

3. Schiefe Verzerrung
   Die Einheit der Schräge ist die gleiche wie bei der Drehung, nämlich Grad. Skew(30deg, 10deg) bedeutet beispielsweise, dass die horizontale Richtung um 30 Grad und die vertikale Richtung um 10 Grad geneigt ist.

4. Offset übersetzen
   Offset umfasst auch horizontalen und vertikalen Offset. translator(x,y) bewegt sich horizontal und vertikal gleichzeitig (d. h. die X-Achse und die Y-Achse bewegen sich gleichzeitig); translatorX(x) bewegt sich nur horizontal (x-Achse bewegt sich nur); vertikal (Y-Achsen-Bewegung).

Animation

Animationen werden in CSS3 durch etwas namens Keyframes gesteuert. Der Name beginnt mit „@keyframes“. , gefolgt vom „Namen der Animation“ und einem Paar geschweifter Klammern „{}“. In den Klammern stehen einige Stilregeln für verschiedene Zeiträume, ähnlich wie wir CSS-Stile schreiben. Für eine Stilregel in „@keyframes“, die aus mehreren Prozentsätzen besteht, beispielsweise zwischen „0 %“ und „100 %“, lautet die Syntax wie folgt:

@keyframes IDENT {
  from {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  to {
    Properties: Properties value;
  }
}

或者全部写成百分比的形式： 
@keyframes IDENT {
  0% {
    Properties: Properties value;
  }
  Percentage {
    Properties: Properties value;
  }
  100% {
    Properties: Properties value;
  }
}

Animation und Übergang haben ihre eigenen entsprechenden Attribute , dann gibt es in der Animation hauptsächlich die folgenden Typen: Animationsdauer; Einige der Eigenschaften werden im Folgenden erläutert:

1. animation-name Keyframe-Name:
   wird verwendet, um den Namen einer Animation zu definieren, d. h. den Namen der zuvor erstellten Animation Keyframes: Der Standardwert ist „None“. Wenn der Wert „None“ ist, gibt es keinen Animationseffekt. Wenn wir mehrere Animationen gleichzeitig an ein Element anhängen möchten, trennen Sie diese einfach durch Kommas.

2. animation-iteration-count Anzahl der Animationsschleifen:
   Der Standardwert ist 1. Wenn Sie eine Endlosschleife durchführen möchten, setzen Sie sie einfach auf „Unendlich“.

3. animation-direction Animationswiedergaberichtung:
   Es gibt nur zwei Werte, der Standardwert ist normal, wenn er auf normal eingestellt ist, wird jede Schleife der Animation vorwärts abgespielt ;Die andere Der Wert ist alternierend. Seine Funktion besteht darin, die Animation in geraden Zeiten vorwärts und in ungeraden Zeiten in umgekehrter Richtung abzuspielen.

4. Animation-Play-State-Wiedergabestatus:
   Es gibt hauptsächlich zwei Werte: „Running“ und „Pause“, wobei „Running“ der Standardwert ist. Sie können die aktuell abgespielte Animation durch Anhalten stoppen und die angehaltene Animation auch durch Ausführen wiedergeben. Dieses Attribut wird nicht häufig verwendet.

Das obige ist der detaillierte Inhalt vonWas sind Übergang, Transformation und Animation in CSS3? Der Unterschied zwischen den dreien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!