Implementierungsschritte der Animationstechnologie in CSS3

Wenn Sie Animationseffekte in CSS3 erzielen müssen, werden drei Technologien verwendet: Transformationsursprung, Übergang, Übergangsverzögerung und Übergangs-Timing-Funktion. Heute werde ich Ihnen eine klare Vorstellung davon geben und sehen, wie Sie Animationseffekte erzielen . .

1. Transformationsursprung

Der Ursprung der CSS-Transformation ist standardmäßig der Mittelpunkt des Objekts. transform-origin akzeptiert zwei Parameter, bei denen es sich um bestimmte Werte wie Prozentsatz, em, px usw. oder Schlüsselwörter wie links, rechts, Mitte, oben, Mitte, unten usw. handeln kann.

Zum Beispiel:

transform-origin: oben rechts;-o-transform-origin: oben rechts;-moz-transform-origin: oben rechts;-webkit-transform-origin: oben richtig ;

transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;

transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;

transform- Herkunft: 50 % 100 %;-o-transform-origin: 50 % 100 %;-moz-transform-origin: 50 % 100 %;-webkit-transform-origin: 50 % 100 %;

2 . Transition--Transition

1.transition-property: Der Name der CSS-Eigenschaft, die die Übergangsanimation definiert. Kann none|all|CSS-Eigenschaftsliste sein.

Zum Beispiel:

transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition- Eigenschaft :background-color;

2.transition-duration: Definieren Sie die Länge der Übergangsanimation.

Zum Beispiel:

transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;

3.Übergangsverzögerung: Definieren Sie die Verzögerungszeit der Übergangsanimation.

Zum Beispiel:

transition-delay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;

4.Übergangszeitfunktion: Definieren Sie den Effekt der Übergangsanimation.

Der Wert kann sein:

ease: Linderungseffekt.

ease-in: Verlaufseffekt.

ease-out: Fade-Effekt.

ease-in-out: Ein- und Ausblendeffekt.

linear: linearer Effekt.

Cubic-Bezier: spezieller kubischer Bezier-Kurveneffekt. Kubikbezier (0,3, 0, 0,5, 1,0).

Zum Beispiel:

transition-timing-function: linear; -o-transition-timing-function: linear;-moz-transition-timing-function: linear;-webkit-transition- Timing-Funktion: linear;

3. Animation

1.

2.animation-duration: Animationszeit.

3.animation-timing-function: Animationswiedergabemethode.

4.Animationsverzögerung: Startzeit der Animation.

5.animation-iteration-count: Anzahl der Spiele. unendlich bedeutet unendliche Zeiten. .

6.animation-direction: Richtung der Animationswiedergabe. normal – jeder Zyklus der Animation geht abwechselnd vorwärts – gerade mal vorwärts, ungerade mal rückwärts.

Zum Beispiel:

div {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: ani;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 下面调用动画 */
@-webkit-keyframes ani {
0% {
-webkit-transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
75% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Fällen Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detaillierte Einführung von CSS3 zum Attribut „Hintergrundgröße“

Detaillierte Einführung von CSS3 zum Attribut „Übersetzen“

Detaillierte Einführung in das Filterattribut von CSS3

Das obige ist der detaillierte Inhalt vonImplementierungsschritte der Animationstechnologie in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!