Welche benutzerdefinierten Regeln werden für CSS3-Animationen verwendet?

css3-Animation verwendet „@keyframes“, um Regeln anzupassen. „@keyframes“ kann Animationsregeln angeben und das Verhalten eines Zeitraums einer CSS-Animation definieren. Die Syntax lautet „@keyframes Animationsname {keyframes-selector {css-styles;}}“.

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

@keyframes ist eine CSS3-Regel, mit der das Verhalten eines Zeitraums von CSS-Animationen definiert und einfache Animationen erstellt werden können.

@keyframes-Regeln bestehen aus einer Reihe gekapselter CSS-Stilregeln, die beschreiben, wie sich Attributwerte im Laufe der Zeit ändern.

@keyframes animation-name {keyframes-selector {css-styles;}}

• keyframes-selector: Definiert den Prozentsatz der Animation, er liegt zwischen 0 % und 100 %. Eine Animation kann viele Selektoren enthalten.

Anschließend können Sie mithilfe verschiedener CSS-Animationseigenschaften viele verschiedene Aspekte der Animation steuern, einschließlich der Anzahl der Wiederholungen der Animation, ob sie zwischen Start- und Endwerten wechselt und ob die Animation ausgeführt oder angehalten werden soll. Animationen können auch ihre Startzeit verzögern.

Eine @keyframe-Regel besteht aus dem Schlüsselwort „@keyframe“, gefolgt von einem Bezeichner, der den Namen der Animation angibt (auf den mit „animation-name“ verwiesen wird), gefolgt von einer Reihe von Stilregeln (getrennt durch geschweifte Klammern). Die Animation wird dann auf das Element angewendet, indem der Bezeichner als Wert des Attributs „animation-name“ verwendet wird.

Syntax:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Innerhalb der geschweiften Klammern müssen wir Keyframes oder Wegpunkte definieren, die den Wert der animierten Eigenschaft an einem bestimmten Punkt während der Animation angeben. Dadurch können wir Zwischenschritte in der Animationssequenz steuern.

Zum Beispiel kann ein einfacher animierter @keyframe so aussehen:

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}

'0%', '50%', '100%' sind alles Keyframe-Selektoren, und jeder Selektor definiert eine Keyframe-Regel. Der Keyframe-Deklarationsblock einer Keyframe-Regel besteht aus Attributen und Werten.

Die obige Animation ähnelt einem einfachen Übergangseffekt: Die Hintergrundfarbe ändert sich ausgehend von einem Wert (0 %) zu Beginn der Animation, erreicht einen Wert (50 %) in der Mitte und erreicht am Ende einen anderen Wert (100 %). Ende der Animation. Die Keyframe-Selektoren „0 %, „50 %“ und „100 %“ definieren die Wegpunkte oder Prozentpunkte, an denen die animierte Eigenschaft ihren Wert ändern soll. Wir können auch die Selektorschlüsselwörter from, to anstelle von 0 % bzw. 100 % verwenden, sie sind gleichwertig.

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    background-color: red;
    }
}

Keyframe-Selektoren bestehen aus einem oder mehreren durch Kommas getrennten Prozentwerten oder den Von- und Bis-Schlüsselwörtern. Beachten Sie, dass für Prozentwerte der Einheitenbezeichner „Prozent“ verwendet werden muss. Daher ist „0“ ein ungültiger Keyframe-Selektor.

Unten sehen Sie ein Beispiel für eine Animation mit einem Keyframe-Selektor, der mehrere durch Kommas getrennte Prozentwerte und/oder die Schlüsselwort-Keyframe-Selektoren von und bis enthält.

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

Die @keyframes-Regel oben definiert: Der obere Versatz des Elements ist am Anfang, in der Mitte und am Ende der Animation gleich Null und beträgt bei einem Viertel und drei Viertel der Strecke 100 Pixel das Element Es bewegt sich in der Animationsschleife mehrmals auf und ab.

css @keyframes spezifizierte Animationsregelbeispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite;
				/* Safari and Chrome */
			}

			@keyframes mymove {
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

(Teilen von Lernvideos: css-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWelche benutzerdefinierten Regeln werden für CSS3-Animationen verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!