Flexbox-Notizen

(Flexbox)

CSS-Animation

动画属性兼容性，需要写5遍浏览器前缀
浏览器的前缀
-webkit-谷歌浏览器
-o-欧鹏浏览器
-khtml-苹果浏览器
-moz-火狐浏览器
-ms-IE浏览器

Transformieren (Übergangsanimation, direkte Animation)

1. Die Transformationstransformation legt mehrere Effekte fest. Durch Hinzufügen von Leerzeichen
   (1) translator(x,y,z) wird der Standardwert (x-Achse) übersetzt.

translateX(200px)水平移动
translateY()垂直移动
translateZ()前后移动

(2) Scale(x,y,z) skaliert standardmäßig alle Achsen. Fragen Sie, wie Sie sehen können, dass die Z-Achse skaliert ist. Bitte geben Sie ein Beispiel.

  scaleX()缩放宽度
  scaleX()缩放高度
  scaleZ()缩放厚度

Es gibt zwei Parameter ohne Einheit zum Skalieren der Breite und Höhe, die zur 2D-Skalierung gehören (Sie müssen beim Schreiben von Code keine 2D-Wörter schreiben), und ein Parameter ist die proportionale Skalierung. Drei Parameter können skaliert werden (x, y, z)
. eingestellt werden, Z-Achsen-Skalierung, 3D-Skalierung (3 Werte, 3D muss hinzugefügt werden, sonst wird ein Fehler gemeldet und die Z-Achsen-Skalierung kann separat eingestellt werden) (3) rotieren(x,y,z)
rotieren Standardwert zur Z-Achse (Quadrat, in Raute verwandeln)

rotateX()水平 
rotateY()垂直 
rotateZ()中心轴

单位：度deg

(4) Skew(x,y) Twist (Kabelzug) Standard-X-Achse (nicht verstehen)

skewX()水平
skewY()垂直 

	单位：度 deg

(5) Matrix (1,0,0,1,0,0) Matrix 2d transformiert die Reihenfolge von 3 * 3
Werten: (Skalenbreite Y-Achsendrehung X-Achsendrehungshöhenskala horizontale Bewegung vertikale Bewegung) Alle müssen nicht geschrieben werden Einheiten

Matrix3d(1,0,0,1,0,0)  //3d变换 4*4  

2. Transformationsstil: Preserve-3D, offener 3D-Modus
3. Transformationsursprung: xyz Offset-Mittelpunkteinheit
   : Pixel oder Prozentsatz

Übergangsanimation

Transition( 1 2 3 4 ) 4 Die Verzögerung kann weggelassen werden und es gibt standardmäßig keine Verzögerung.

1. Transition-Property gibt das CSS an, das animiert werden soll
2. Übergangszeit der Animation
3. Übergangs-Timing-Funktion Animationstyp
   linear (gleichmäßige Geschwindigkeit) lineare Beschleunigung (langsam, schnell und langsam) sanfte Beschleunigung von langsam zu schnell, Beschleunigung von schnell zu langsam, Beschleunigung von langsam zu schnell und dann zu langsam
4. Übergangsverzögerung Verzögerungszeiteinheit
   : Sekunden s
   Hinweis: Anzeige unterstützt keine Animationseffekte, nicht alle Attribute können Animationseffekte ausführen,
   Sichtbarkeit kann sein, Deckkraft kann ausgeblendet werden

Beispiel für eine Attributzeiteffektverzögerung
: (nach dem Schweben dreht sich das Element und wird größer)

.box2:hover div{
    width: 100px;
    height: 100px;
    transform: rotate(360deg);
}
.box2 div:nth-child(1){
    transition: all 5s linear ;
}

benutzerdefinierte Animation

Animation(帧动画)  

1. Animationsname definiert den Namen der Animation, also den Namen der @keyframes-Animation
2. Animationsdauer Animationszeiteinheit: Sekunden s Standardwert 0
3. Animation-Timing-Funktion Der Animationstyp gibt die Geschwindigkeitskurve der Animation an, der Standardwert ist Leichtigkeit
4. Animationsverzögerung Animationsverzögerungszeiteinheit: Sekunde: s Standardzeit 0
5. Animation–Iteration-Count gibt an, wie oft die Animation abgespielt wird. Der Standardwert ist 1 Endlosschleife
6. Animationsrichtung gibt an, ob die Animation im nächsten Zyklus in umgekehrter Richtung abgespielt wird (die Anzahl der Zyklen ist größer als 2). Standardmäßig wird
   in umgekehrter Richtung abgespielt. Die Animation wird in umgekehrter Richtung abgespielt. Alternativ (Rückwärtswiedergabe für ungerade Zahlen, Vorwärtswiedergabe für gerade Zahlen)
7. Animation-Play-State Animationsstatus (Mauszeiger)
   laufende Bewegung pausiert gestoppt
8. Status des Animationsfüllmodus außerhalb der Animationszeit.
   Keine. Startposition nicht rückwärts setzen. Endposition vorwärts

Animation durchführen

	@keyframes 名称{
例子：圆球移动轨迹
		方法一（水平）
		form{}
		to{}
		方法二（水平和垂直）
		0%{}
		25{}
		50{}
		100%{}
}