Ausführliche Erläuterung von Animationsbeispielen in CSS3

1: Detaillierte Erläuterung der Animationsparameter

Da oben die Animationsanimation verwendet wurde, finden Sie hier eine detaillierte Einführung in die Parameter dieser Animation.

Einführung

CSS-Animation (Animationen) besteht einfach darin, einen oder einige ihrer CSS-Werte innerhalb einer bestimmten Häufigkeit innerhalb einer festgelegten Animationszeit heimlich zu ändern und so visuelle Transformationseffekte zu erzielen. Viele Aspekte von Animationen können gesteuert werden, darunter die Laufzeit der Animation, Start- und Endwerte sowie Animationspausen und verzögerte Startzeiten.

Syntax

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

<&#39; animation-name &#39;>: Abrufen oder Festlegen Der Name der auf das Objekt angewendeten Animation
<&#39; animation-duration &#39;>: Rufen Sie die Dauer der Objektanimation ab oder legen Sie sie fest
<&#39; animation-timing-function &#39;>: Übergangstyp der Objektanimation abrufen oder festlegen
<&#39; animation-delay &#39;>: Zeit der Objektanimationsverzögerung abrufen oder festlegen
<&#39; animation-iteration-count &#39;>: Anzahl der Schleifen der Objektanimation abrufen oder festlegen
<&#39; animation-direction &#39;>: Abfragen oder festlegen, ob sich die Objektanimation bewegt in umgekehrter Reihenfolge in der Schleife
<&#39; animation-fill-mode &#39;>: Status außerhalb der Objektanimationszeit abrufen oder festlegen
<&#39; animation-play-state &#39;>: Rufen Sie den Status der Objektanimation ab oder legen Sie ihn fest. w3c erwägt, dieses Attribut zu entfernen, da der Status der Animation auf andere Weise erreicht werden kann, beispielsweise durch Zurücksetzen des Stils

Animation

Abkürzungsattribut für alle Animationen Attribute, außer dem Attribut „animation-play-state“.

Animationsname

Gibt den Namen der @keyframes-Animation an. Es ist der Name der Animation, gefolgt von @keyframes.

animation-duration

Gibt die Sekunden oder Millisekunden an, die die Animation benötigt, um einen Zyklus abzuschließen. Der Standardwert ist 0.

animation-timing-function

Gibt die Geschwindigkeitskurve der Animation an. Der Standardwert ist „einfach“.

Allgemeine Parameter für die Animationsgeschwindigkeit:

1. linear: linearer Übergang. Entspricht der Bezier-Kurve (0,0, 0,0, 1,0, 1,0)

2. Einfachheit: sanfter Übergang. Entspricht der Bezier-Kurve (0,25, 0,1, 0,25, 1,0)

3. Einstieg: von langsam nach schnell. Entspricht der Bezier-Kurve (0,42, 0, 1,0, 1,0)

4. Ease-out: von schnell nach langsam. Entspricht der Bezier-Kurve (0, 0, 0,58, 1,0)

5. ease-in-out: von langsam nach schnell und dann nach langsam. Entspricht der Bezier-Kurve (0,42, 0, 0,58, 1,0)

6. Schrittstart: Entspricht Schritten(1, Start)

7. Schritt -end: Entspricht „steps(1, end)“

8. steps([, [ start | end ] ]?): Eine Schrittfunktion, die zwei Parameter akzeptiert. Der erste Parameter muss eine positive ganze Zahl sein, die die Anzahl der Schritte der Funktion angibt. Der Wert des zweiten Parameters kann start oder end sein und gibt den Zeitpunkt an, zu dem sich der Wert jedes Schritts ändert. Der zweite Parameter ist optional und der Standardwert ist end.

9. cubic-bezier(, , , ): Spezifischer Bezier-Kurventyp, 4 Werte erforderlich in [0, 1] sein Im Intervall

animation-delay

gibt an, wann die Animation beginnt. Der Standardwert ist 0. Das heißt, es bezieht sich auf die verzögerte Ausführungszeit der Animation.

animation-iteration-count

Gibt an, wie oft die Animation abgespielt wird. Der Standardwert ist 1. Natürlich können wir es 2-mal, 3-mal usw. einstellen. Es gibt auch ein Wireless-Loop-Schlüsselwort infinite, was bedeutet, dass die Animation wiederholt in einer Schleife abgespielt wird.

Animationsrichtung

Gibt an, ob die Animation im nächsten Zyklus rückwärts abgespielt wird. Der Standardwert ist „normal“. Natürlich gibt es auch folgende Werte:

1. reverse: Laufen in Rückwärtsrichtung

2. alternate: Die Animation läuft zunächst normal und dann in die entgegengesetzte Richtung und läuft abwechselnd weiter

3. alternate-reverse: Die Animation läuft zunächst in Rückwärtsrichtung und dann in Vorwärtsrichtung und läuft abwechselnd weiter

animation-fill-mode

Gibt den Zustand des Objekts außerhalb der Animationszeit an.

1. none: Standardwert. Stellen Sie den Status des Objekts nicht außerhalb der Animation ein

2. forwards: Setzen Sie den Objektstatus auf den Status am Ende der Animation

3. backwards: Setzt den Objektzustand auf den Zustand, wenn die Animation startet

4. both: Setzen Sie den Objektstatus auf den End- oder Startstatus der Animation, bevor die Animation beginnt. Keyframe; nach Abschluss der Animation ist es der Keyframe-Status „bis“ oder „100 %“.

animation-play-state

Gibt an, ob die Animation ausgeführt oder angehalten wird. Der Standardwert ist "running". Es gibt auch einen Wert paused: Pause.

Zwei: Animationsanimationsbeispiel

Instanz eins verwendet from to:

div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; /*Firefox*/-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/}@keyframes mymove{from {left:0px;}to {left:200px;}}
@-moz-keyframes mymove { /*Firefox*/from {left:0px;}to {left:200px;}}
@-webkit-keyframes mymove{ /*Safari and Chrome*/from {left:0px;}to {left:200px;}}

Instanz zwei Nutzungsprozentsatz:

@keyframes myfirst{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

@-moz-keyframes myfirst{ /* Firefox */0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

@-webkit-keyframes myfirst{ /* Safari 和 Chrome */0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

@-o-keyframes myfirst {/* Opera */0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

Instanz drei, mit js+Transform und Animation erreicht 3D-Animation

Beispieladresse:

Nur Browser mit Webkit-Kern können die relevanten 3D-Animationseffekte sehen.

Der Effekt ist im Bild dargestellt:

CSS-Code:

body {font-family: 'Lucida Grande', Verdana, Arial;font-size: 12px;
      }  #stage {margin: 150px auto;width: 600px;height: 400px;-webkit-perspective: 800;
      }  #rotate {margin: 0 auto;width: 600px;height: 400px;-webkit-transform-style: preserve-3d;-webkit-animation-name: x-spin;-webkit-animation-duration: 7s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;
      }  .ring {margin: 0 auto;height: 110px;width: 600px;-webkit-transform-style: preserve-3d;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;
      }  
      .ring > :nth-child(odd) {background-color: #995C7F;
      }  .ring > :nth-child(even) {background-color: #835A99;
      }  .poster {position: absolute;left: 250px;width: 100px;height: 100px;opacity: 0.7;color: rgba(0,0,0,0.9);-webkit-border-radius: 10px;
      }  
      .poster > p {font-family: 'Georgia', serif;font-size: 36px;font-weight: bold;text-align: center;margin-top: 28px;
      }  #ring-1 {-webkit-animation-name: y-spin;-webkit-animation-duration: 5s;
      }  #ring-2 {-webkit-animation-name: back-y-spin;-webkit-animation-duration: 4s;
      }  #ring-3 {-webkit-animation-name: y-spin;-webkit-animation-duration: 3s;
      }  @-webkit-keyframes x-spin {0%    { -webkit-transform: rotateX(0deg); }50%   { -webkit-transform: rotateX(180deg); }100%  { -webkit-transform: rotateX(360deg); }  }

      @-webkit-keyframes y-spin {0%    { -webkit-transform: rotateY(0deg); }50%   { -webkit-transform: rotateY(180deg); }100%  { -webkit-transform: rotateY(360deg); }  }

      @-webkit-keyframes back-y-spin {0%    { -webkit-transform: rotateY(360deg); }50%   { -webkit-transform: rotateY(180deg); }100%  { -webkit-transform: rotateY(0deg); }  }

HTML-Code:

<div id="stage">
  <div id="rotate"><div id="ring-1" class="ring"></div><div id="ring-2" class="ring"></div><div id="ring-3" class="ring"></div>
  </div></div>

js-Code:

const POSTERS_PER_ROW = 12;
const RING_RADIUS = 200;function setup_posters (row){var posterAngle = 360 / POSTERS_PER_ROW;for (var i = 0; i < POSTERS_PER_ROW; i ++) {      var poster = document.createElement('div');
      poster.className = 'poster';      
      var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)';
      poster.style.webkitTransform = transform;      
      var content = poster.appendChild(document.createElement('p'));
      content.textContent = i;
      row.appendChild(poster);
    }
}function init (){
    setup_posters(document.getElementById('ring-1'));
    setup_posters(document.getElementById('ring-2'));
    setup_posters(document.getElementById('ring-3'));
}

window.addEventListener('load', init, false);

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Animationsbeispielen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!