Was ist der Unterschied zwischen Übergang und Animation in CSS3?

Der Unterschied zwischen Übergang und Animation in CSS3: 1. Der CSS-Übergang erfordert eine Ereignisauslösung, die CSS-Animation jedoch nicht. 2. Der CSS-Übergang verfügt nur über einen Satz (zwei) Schlüsselbilder, die jeweils die Start- und Endaktionen festlegen CSS-Animationen können mehrere Keyframes definieren.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Übergangsübergang

CSS-Änderungen reibungsloser machen

Eigenschaft:

Kastanie:

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；    //合在一起

transition Der Vorteil ist, dass es einfach und benutzerfreundlich ist, aber es weist einige große Einschränkungen auf. Der Übergang ist ein einmaliges Ereignis und kann nicht wiederholt auftreten, es sei denn, er wird immer wieder ausgelöst. CSS-Animation wurde vorgeschlagen, um diese Probleme zu lösen.

Eigenschaft	Beschreibung
Transtion-Eigenschaft	Geben Sie die Eigenschaften des Übergangs an
transtion- Dauer	Geben Sie die für den Übergang erforderliche Zeit an ee
	Der Übergang muss durch ein Ereignis ausgelöst werden, sodass er beim Laden der Webseite nicht automatisch erfolgen kann.
Übergang kann nur den Startzustand und den Endzustand definieren, nicht jedoch den Zwischenzustand.	Eine Übergangsregel kann nur Änderungen an einem Attribut definieren und nicht mehrere Attribute umfassen.

Animationsanimation

Steuern Sie jeden Schritt der Animation, indem Sie Schlüsselbilder steuern, um komplexere Animationseffekte zu erzielen

Geben Sie die an Name der Keyframe-Animation Startzeit der Animation, in Sekunden
animation-iteration-count
Gibt die Anzahl der Wiedergabezeiten der Animation an, der Standardwert ist 1, wenn sie unendlich ist, wird sie endlos in einer Schleife abgespielt

Animation -direction

Gibt die Wiedergaberichtung der Animation an. Die Standardeinstellung ist „alternativ“, sodass die Animation abwechselnd abgespielt wird.

Animation deklarieren mit Schlüsselbildern

Rufen Sie die mit Schlüsselbildern in der Animation deklarierte Animation auf. @Keyframes sind Schlüsselbilder, und eine Animation kann viele Bilder enthalten. Eine Stilregel in @keyframes besteht aus mehreren Prozentsätzen, um einen sich ständig ändernden Effekt zu erzielen. Kastanie:

<style>
img{
    height:150px;
    width:150px;
    transition: height 0.5s linear 0.5s;
}
img:hover{
    height:100px;
}
</style>

Die Prozentzeichen zwischen 0 % und 100 % im obigen Code können nicht weggelassen werden, 0 % kann durch „von“ und 100 % durch „bis“ ersetzt werden. Damit die mychange-Animation einen Effekt hat, muss sie über die CSS3-Animationseigenschaft aufgerufen werden. Der Unterschied zwischen CSS-Übergang und AnimationDer Hauptunterschied besteht darin, dass der Übergang ein Ereignis auslösen muss, um seine CSS-Eigenschaften im Laufe der Zeit zu ändern; Animation kann auch explizit sein, ohne dass ein Ereignis die CSS-Eigenschaften von Elementen auslöst Zeit, um einen Animationseffekt zu erzielen. 1) Der CSS-Übergang muss durch ein Ereignis (wie :hover usw.) ausgelöst werden, damit er funktioniert, Animationen jedoch nicht. 2) Der Übergang hat nur einen Satz (zwei: Anfang-Ende) von Schlüsselbildern und die Animation kann mehrere Schlüsselbilder definieren. 3) Verwenden Sie Übergänge und Animationen, um einen dynamischen Effekt zu erzeugen, wenn die Maus darüber bewegt wird. Wenn Sie die Maus wegbewegen, ändert sich der durch den Übergang erzeugte Effekt langsam wieder in sein ursprüngliches Erscheinungsbild, während die Animation plötzlich wieder in ihr ursprüngliches Erscheinungsbild zurückkehrt originelles Aussehen. (Lernvideo-Sharing: CSS-Video-Tutorial, )

Web-Frontend-Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Übergang und Animation in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!