Detaillierte Erklärung der CSS3-Animation und der neuen Funktionen von HTML5

1. CSS3-Animation

☺CSS3-Animationen sind viel einfacher und funktionieren besser als das dynamische Ändern von Elementstilen über JavaScript. Es gibt drei Animationseigenschaften in CSS3: transform , transition und animation .
1. Transform
transform wird hauptsächlich verwendet, um die Form von Elementen zu ändern: rotate , scale , skew , translate und matrix .
Beispiel:

.transform-klasse {
    transformieren: drehen (30 Grad) skalieren (2,3);
}

1.1. Basispunkt des Transform-Origin. Alle Transformationen basieren auf dem Basispunkt, der standardmäßig dem Mittelpunkt des Elements entspricht. Verwendung: transform-origin:(x,y) , X, Y können Prozentwerte, px, rem oder links, rechts, Mitte (X) und oben, Mitte, unten (Y) sein.
Beispiel:

.transform-klasse {
    transform-origin: (links, unten);
}

1.2. rotate dreht das Element um den angegebenen Winkel. Handelt es sich um eine positive Zahl, erfolgt die Drehung im Uhrzeigersinn, bei einer negativen Zahl gegen den Uhrzeigersinn.
Beispiel:

.transform-rotate {
    transformieren: drehen (30 Grad);
}

1.3. Maßstab
Es gibt drei Möglichkeiten, scale zu verwenden: scale(x,y) , scaleX(x) und scale(Y) . Ist der Zoomfaktor größer als 1 wird vergrößert, ist er gleich 1 wird die Originalgröße wiedergegeben und ist er kleiner als 1 wird verkleinert.
Beispiel:

.transform-scale {
    transformieren: Skalierung(2,1,5);
}

.transform-scaleX {
    transformieren: scaleX(2);
}

.transform-scaleY {
    transformieren: scaleY(1,5);
}

1.4. Übersetzen
Es gibt drei Fälle translate : translate(x,y) , translateX(x) , translateY(y) .“
Beispiel:

.transform-translate {
    transformieren: übersetzen (400px, 20px);
}

.transform-translateX {
    transformieren: übersetzenX(300px);
}

.transform-translateY {
    transformieren: übersetzenY(20px);
}

1.5. Schrägverzerrung
Es gibt drei Möglichkeiten, skew zu schreiben: skew(xdeg,ydeg) , skewX(xdeg) , skewY(ydeg) , wobei die Einheit Grad der Winkel ist.
Beispiel:

.transform-skew {
    Transformation: Schrägstellung (30 Grad, 10 Grad);
}

.transform-skewX {
    Transformation: schrägX(30 Grad);
}

.transform-skewY {
    transformieren: schrägY(10 Grad);
}

1.6, Matrix
Kurze Matrixdetails
2. Übergang
transition legen Sie fest, wie ein Element reibungslos von einem Zustand in einen anderen übergeht:

• transition-property
• transition-duration
• transition-timing-function (Übergangsrate)
• transition-delay

3. Animationen
animation ähnelt der Einzelbildanimation in Flash und ist, genau wie die Wiedergabe eines Films, sehr feinfühlig und flexibel. Ein Übergang gibt lediglich einen Start- und Endzustand an. Einzelbildanimationen bestehen aus Keyframes. Die kontinuierliche Wiedergabe vieler Keyframes ergibt eine Animation. In CSS3 wird das Keyframes-Attribut verwendet, um Einzelbildanimationen abzuschließen.
@Schlüsselbilder

• animationName: Name der Animation (geben Sie ihm einen eigenen Namen)
• Prozentsatz: Prozentwert [pəˈsentɪdʒ]
• Eigenschaften: Name der Stileigenschaft (Farbe, links usw.)
  

Beispiel:

@keyframes Animationsname {
   aus {
       Eigenschaften: Wert;
   }
   Prozentsatz
       Eigenschaften: Wert;
   }
   Zu {
       Eigenschaften: Wert;
   }
}
//oder
@keyframes Animationsname {
   0% {
       Eigenschaften: Wert;
   }
   Prozentsatz
       Eigenschaften: Wert;
   }
   100 % {
       Eigenschaften: Wert;
   }
}

2. Neue Funktionen von H5

1. Wird zum Zeichnen von Canvas-Elementen verwendet.
2. Video- und Audioelemente für die Medienwiedergabe.
3. Der lokale Offline-Speicher in localStorage speichert Daten für lange Zeit und die Daten gehen nach dem Schließen des Browsers nicht verloren; die Daten in sessionStorage werden nach dem Schließen des Browsers automatisch gelöscht.
4. (新標簽) Bessere semantische Inhaltselemente

Formularsteuerelemente: Kalender, Datum, Uhrzeit, E-Mail, URL, Suche.

(選擇器)

Dies ist das Ende dieses Artikels über CSS3-Animation und neue HTML5-Funktionen. Weitere relevante Inhalte zu CSS3-Animation und neuen HTML5-Funktionen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!