Eine kurze Einführung in Transformationen und Übergänge, Animationen und zugehörige Eigenschaften in CSS3

1. Transformation

transformieren: Sie können das Elementobjekt drehen, skalieren, verschieben, neigen und in eine Matrix transformieren.
Beispiel:

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*矩阵变形*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*透视*/
perspective(length);

Übergang: Übergangsattribut

Übergang: CSS-Attribut Name des Übergangseffekts Dauer des Übergangseffekts Geschwindigkeitskurve des Übergangseffekts Startzeit;

transition: property duration timing-function delay;
/*示例*/
transition:1s ease all;
-webkit-tansition:1s ease all;
-moz-transition:1s ease all;
-o-transition:1s ease all;

rotate(): Elemente im zweidimensionalen Raum drehen.

Wenn für das Element ein Perspektivwert festgelegt ist, kann rotation3d() verwendet werden, um eine Drehung im dreidimensionalen Raum zu erreichen.

rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/
rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/
rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/

scale()

scaleX(<number>)/*只在X轴（水平方向）缩放元素*/
scaleY(<number>)/*只在Y轴（垂直方向）缩放*/
scaleZ(<number>)/*只在Z轴缩放，前提：元素设定透视值*/

translate([,]): Bewegung ist das Ausmaß der Verschiebung.

translateX(<translation-value>);/*只在X轴（水平方向）移动*/
translateY(<translation-value>);/*只在Y轴（垂直方向）移动*/
translateZ(<translation-value>);/*只在Z轴移动，前提：元素设置透视值*/

skew(): Skew

skewX(<angle>);/*只在X轴（水平）倾斜*/
skewY(<angle>);/*只在Y轴（垂直）倾斜*/

matrix(a,c,e,b,d,f): Bei der Matrixverformung werden die Werte von c und e durch Sinus- oder Kosinuswerte dargestellt.

a: stellt die Skalierung der X-Achse dar
c: skewY(); . Übergang



Übergangseigenschaft

: Übergangseigenschaft

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

Übergangsdauer: Übergangszeit

.wrap{
    perspective:1000px; 
}
.wrap .child{
    transform:perspective(1000px);
}

Übergangsverzögerung: Verzögerungszeit, wenn es eine negative Zahl ist, wird die übermäßige Aktion ab diesem Zeitpunkt angezeigt und die vorherige Aktion wird abgeschnitten.

Übergangs-Timing-Funktion: Übergangseffekt, standardmäßige Leichtigkeit.

3. Animation

transition-property:all;/*针对所有元素都有过度效果*/
transition-property:none;/*没有元素有过度效果*/
transition-property:ident;/*指定css属性有过度效果，例如width*/

Animationsname

: Animationsname, muss in Verbindung mit der Regel @keyframes verwendet werden, da die Der Name der Animation wird durch die @-Keyframes-Definition dargestellt. Wenn mehrere Attributwerte bereitgestellt werden, trennen Sie diese durch Kommas.

transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/
transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/
transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/
transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/
transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/
transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/

@keyframes

entspricht einem Namespace, gefolgt von einem Substantiv. Wenn der Animationsname in der Klasse den entsprechenden Namen definiert, kann die Animation ausgeführt werden. Beim Definieren einer Animation können Sie direkt die Schlüsselwörter from und to verwenden, um von einem Zustand in einen anderen zu wechseln.

animation-duration: Animationszeit

animation-timing-function

: Wiedergabemethode, die Werte sind wie folgt: ease: Ease-Effekt, äquivalent zur Funktion „Cubic-Bezier“ (0,25, 0,1, 0,25, 1,0), also „Cubic Bezier“.

linear: linearer Effekt

.animation_name{
    left:0;
    top:100px;
    position: absolute;
    -webkit-animation: 0.5s 0.5s ease infinite alternate;
    -moz-animation: 0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;
    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}
@-webkit-keyframes demo1{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}

ease-in: Fade-out-Effekt

ease-out: fade-out-Effektease-in-out: fade-out-EffektStep-Start: Sprung Gehen Sie jetzt zum Animationsendzustand

Schrittende: Behalten Sie den Animationsstartzustand bei. Wenn die Animationsausführungszeit abgelaufen ist, springen Sie sofort zum Animationsendzustand

Schritt([,[Start | Ende]]?) : Die erste Parameternummer ist die angegebene Anzahl von Intervallen, d. h. die Animation ist für die phasenweise Anzeige in n Schritte unterteilt. Der zweite Parameter ist standardmäßig auf „Ende“ eingestellt, wodurch der Status „Start“ am Ende und „Ende“ festgelegt wird Der Zustand am Anfang ist der Effekt von Füllmoduskonflikten und die Einstellung von Animationsfüllmodus ist der Endzustand der Animation. cubic-bezier(,,,): spezieller kubischer Zebel-Kurveneffekt

animation-delay
: Wiedergabezeit starten


animation-iteration -count
: Die Anzahl der Wiedergabevorgänge ist unendlich.


Animationsrichtung

: Der Wert ist:

normal: normal. Richtungrückwärts: Die Animation läuft in umgekehrter Richtung und die Richtung ist immer ähnlich wie bei normal

alternativ: Die Animation wechselt abwechselnd vorwärts und rückwärts

Animationsfüllmodus

: Der Zustand nach der Wiedergabe, Wert:

keine: Standardwert, nicht festgelegt vorwärts: Behält den Zustand bei, in dem die Animation nach dem Ende endet

rückwärts: Zurück in den Zustand, wenn die Animation nach dem Ende beginnt

both: Kann nach dem Ende befolgt werden. Zwei Regeln für vorwärts und rückwärts
animation-play-state: Status der Objektanimation abrufen oder festlegen, Wert:
läuft: Standard, Bewegung

paused: pausiert

Vier, zugeordnete Attribute

transform-origin
: Transformationsursprung, Referenzpunkt der Transformation , Standard ist der Mittelpunkt des Elements. Es gibt zwei Parameter, Parameter eins ist die Abszisse und Parameter zwei ist die Ordinate.

Prozentsatz: Geben Sie den Koordinatenwert in Prozent an, kann negativ sein
Länge: Geben Sie den Koordinatenwert in Länge an, kann negativ sein

Links Mitte rechts: Nehmen Sie den Wert in horizontaler Richtung an

Oben in der Mitte unten: Nimm den Wert in vertikaler Richtung. Wert

perspective-prigin

: Perspektivischer Ursprung, definiert auf der X-Achse und der Y-Achse des 3D-Elements, der die Änderung ermöglicht untere Position des 3D-Elements Wenn dieses Attribut definiert ist, ist es ein untergeordnetes Element eines Elements, der Perspektive, nicht des Elements selbst. Hinweis: Dieses Attribut muss zusammen mit dem Perspektiveattribut verwendet werden, das nur 3D-transformierte Elemente betrifft. Werte: Prozentsatz, Länge, links, Mitte, rechts, oben, Mitte, unten

backface-visibility
: Versteckt die Rückseite des Inhalts, die Rückseite ist sichtbar Standardmäßig invertiert: Der Inhalt ist nach der Transformation weiterhin sichtbar. Wenn die Sichtbarkeit der Rückseite auf „versteckt“ eingestellt ist, wird der Inhalt nach der Drehung ausgeblendet und die Vorderseite ist nach der Drehung nicht mehr sichtbar.
Werte: sichtbar, versteckt

transform-style: 3D-Rendering, legt fest, wie eingebettete Elemente im 3D-Raum gerendert werden. Es gibt zwei Werte:

flach: alle untergeordneten Elemente werden in einer 2D-Ebene gerendert Preserve-3d: 3D-Raum bewahren

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in Transformationen und Übergänge, Animationen und zugehörige Eigenschaften in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!