Implementierung der Funktionen der Transitions-Eigenschaft und der Animations-Eigenschaft der CSS3-Animationseigenschaft

Der Inhalt dieses Artikels befasst sich mit der funktionalen Implementierung des Transitions-Attributs und des Animationsattributs von CSS3-Animationsattributen. Ich hoffe, dass er für Sie hilfreich ist.

1 Übergangsfunktion

(1) Browserunterstützung:

Bisher: Safari3.1 oder höher, Chrome8 oder höher, Firefox4 oder höher, Opera10 Die oben genannten Browser und IE11 oder höher unterstützen diese Funktion.

(2) Funktion

In CSS3 implementiert die Transitions-Funktion die Animationsfunktion, indem ein Attribut eines Elements innerhalb einer bestimmten Zeit reibungslos von einem Attributwert zu einem anderen übergeht.

(3) Verwendung

Übergang: Eigenschaftsdauer-Timing-Funktion

Eigenschaft: Gibt an, welche Attribut für einen reibungslosen Übergang.

Dauer: Gibt an, wie lange Zeit es dauert, um den reibungslosen Übergang von Attributen abzuschließen.

Timing-Funktion: Gibt an, welche Methode verwendet wird, um einen reibungslosen Übergang zu ermöglichen.

div{
background-color：#ffff00;
transition：background-color 1s linear;//在1秒内让div元素的背景色从黄色平滑过渡到浅蓝色。
}
div{
background-color：#00ffff；
}

(4) Eine andere Verwendungsmethode

transition-property：background-color；
transition-duration：1；
transition-timing-function：linear；

(5) Das Attribut „transition-delay“

gibt an, wie lange der Spezialeffekt der Transformationsanimation verzögert wird bevor es ausgeführt wird. Eigenschaftswerte können in Sekunden oder Millisekunden angegeben werden.

transition-delay：1s；
//或 transition：background-color 1s linear 2s；（在第四个参数中书写延迟时间）

(6) Verwenden Sie die Übergangsfunktion, um mehrere Attributwerte gleichzeitig reibungslos zu übergehen

transition：background-color 1s linear，color 1s linear，width 1s linear；

(7) Animationseffekte wie Bewegung und Drehung

img{
position：absolute；top：70px；left：0；
transform：rotate（0deg）；
transition：left 1s linear，transform 1s linear；
}
 img：hover{
left：30px；
transform：rotate（720deg）；
}

(8) Nachteile

Sie können nur den Startwert und den Endwert des Attributs angeben und dann einen reibungslosen Übergang zwischen den beiden Attributwerten erzielen. Komplexere Animationseffekte können nicht erzielt werden.

2 Animationsfunktion

(1) Browserunterstützung:

Bisher: Safari4 oder höher, Chrome2 oder höher, Firefox20 oder höher, Opera18 oder oben, IE11 und höher unterstützen Browser diese Funktion.

(2) Die Funktion

ist dieselbe wie bei Übergängen. Beide erzielen Animationseffekte, indem sie die Attributwerte von Elementen ändern.

Unterschied: Die Animationsfunktion erzielt komplexere Animationseffekte, indem sie mehrere Keyframes definiert und die Attributwerte der Elemente in jedem Keyframe definiert.

(3)Erstellen Sie eine Sammlung von Keyframes

@keyframes Keyframe-Sammlungsname {Code zum Erstellen von Keyframes}

(4)Code um Keyframes zu erstellen (ähnlich wie folgt)

40 %{Stilcode in diesem Keyframe

(40 % bedeutet, dass sich der geänderte Frame bei 40 % der gesamten Animation befindet Prozess, der Startrahmen ist 0 % und der Endrahmen ist 100 %

@keyframes mycolor{
0%{
background-color：red;
}
40%{
background-color：darkblue;
}
70%{
background-color：yellow;
}
100%{
background-color：red;
}
}

(5)

Verwenden Sie die Sammlung von Keyframes im Stil des Elements

div{
animation-name：my-color； //指定关键帧集合的名称
animation-duration：5s； //指定完成整个动画所花费的时间
animation-timing-function：linear； //指定实现动画的方法
}

(6) Andere Attribute

animation-delay: Wird verwendet, um anzugeben, wie viele Sekunden oder Millisekunden verzögert werden sollen, bevor die Animation gestartet wird.

animation-iteration-count: wird verwendet, um die Anzahl der Animationsausführungen anzugeben, die als unendlich angegeben werden kann.

Animationsrichtung: Wird verwendet, um die Ausführungsrichtung der Animation anzugeben. Zu den spezifizierbaren Attributwerten gehören:

• normal: Anfangswert (kehrt nach Ausführung der Animation in den Anfangszustand zurück)

• alternativ: alternativ Ausführung der Animationsrichtung

• reverse: Ausführung der Animation in umgekehrter Richtung

• alternate-reverse: Ändert abwechselnd die Ausführungsrichtung der Animation von die umgekehrte Richtung

(7) Verwenden Sie beim Definieren der Animationsanimation in einer Stilcodezeile die folgende Schreibmethode

Animation: Der Name des Keyframes, der Ausführungszeit der Animation, die Implementierungsmethode der Animation, wie viele Sekunden vor dem Start verzögert werden sollen. Die Anzahl der Ausführungen der Animation. Animation, die Ausführungsrichtung der Animation. (8) Um die Animation zu realisieren Mehrere Attributwerte ändern sich gleichzeitig

Geben Sie diese Attributwerte einfach gleichzeitig in jedem Schlüsselbild an.

3 实现动画的方法

方法	属性值的变化速度
linear	在动画开始时与结束时以同样速度进行改变
ease-in	动画开始时速度很慢，然后速度沿曲线值进行加快
ease-out	动画开始时速度很快，然后速度沿曲线值进行放慢
ease	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢
ease-in-out	动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢

4 实现网页的淡入效果

通过在开始帧与结束帧中改变页面的opacity属性的属性值来实现页面的淡入效果。

@keyframes fadein{
0%{
opacity：0；
background-color：white;
}
100%{
opacity：1；
background-color：white;
}
body{
animation-name： fadein； 
animation-duration：5s； 
animation-timing-function：linear； 
animation-iteration-count：1；
}

相关推荐：

css3动画属性animation（动画）_html/css_WEB-ITnose

CSS3展现精彩的动画效果 css3的动画属性_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonImplementierung der Funktionen der Transitions-Eigenschaft und der Animations-Eigenschaft der CSS3-Animationseigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!