Heim > Artikel > Web-Frontend > Eine kurze Einführung in Transformationen und Übergänge, Animationen und zugehörige Eigenschaften in CSS3
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
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.
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
animation-duration: Animationszeit
: 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 AnimationsendzustandSchritt([,[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
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ärtsAnimationsfü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 beginntboth: 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
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
: 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
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!