So verwenden Sie die Animationseigenschaft in CSS3

Es gibt sechs Animationsattribute in CSS3: Animationsname, benötigte Zeit zum Abschließen der Animation, Geschwindigkeit, Verzögerung, Wiedergabegeschwindigkeit und ob es eine umgekehrte Wiedergabe gibt Die Animationsattributmethode in CSS3 hat einen bestimmten Referenzwert. Ich hoffe, dass sie für alle hilfreich ist.

CSS wird hauptsächlich zur Beschreibung des Stils und Layouts von Webseiten verwendet, und CSS3 ist der neueste CSS-Standard. Er bietet mehr Methoden und mit CSS3 können Sie Animationen erstellen, um den Inhalt von Webseiten zu bereichern Teilen Sie CSS3 mit Ihnen. Animationsattribut in - Animation

Achten Sie bei der Verwendung auf Browserkompatibilitätsprobleme

Internet Explorer 10, Firefox und Opera unterstützen das Animationsattribut.

Safari und Chrome unterstützen das Attribut -webkit-animation

Daher sollten Browserkompatibilitätsprobleme beim Schreiben von Programmen berücksichtigt werden

Animationsattribut

wird verwendet, um sechs Animationseigenschaften festzulegen:

(1) Animationsname: Gibt den Namen der Animation an.

animation-name:demo//Internet Explorer 10、Firefox 以及 Opera 浏览器中
-webkit-animation-name:demo//Safari 和 Chrome

(2) Animationsdauer: Die Zeit, die zum Abschließen der Animation benötigt wird (in Sekunden und Millisekunden)

animation-duration：3s；
-webkit-animation-duration:3s;

(3) Animations-Timing-Funktion: Animationsgeschwindigkeitskurve

linear: mit konstanter Geschwindigkeit abspielen

ease: Die Animationsgeschwindigkeit ist am Anfang langsam, beschleunigt sich dann und verlangsamt sich am Ende (Standard)

ease-in: bedeutet Die Animation beginnt mit einer niedrigen Geschwindigkeit.

Ease-Out: bedeutet, dass die Animation mit einer niedrigen Geschwindigkeit endet.

ease-in-out: Die Animation startet und endet mit niedriger Geschwindigkeit

cubic-bezier(n,n,n,n): Stellen Sie den gewünschten Wert in der Kubikbezier-Funktion ein , ja Wert von 0 bis 1

animation-timing-function：ease；
-webkit-animation-timing-function:ease;

(4) Animation-Delay: Verzögerungszeit für den Start der Animation

animation-delay：3s；
-webkit-animation-delay:3s;

(5) Animation-Iteration-Count: Anzahl der Animationswiedergaben

n: Der Wert, wie oft die benutzerdefinierte Animation abgespielt wird

unendlich: bezieht sich auf die Endlosschleifenwiedergabe der Animation

animation-iteration-count：4；//循环四次
-webkit-animation-iteration-count:infinite;//循环无数次

(6) Animationsrichtung: ob die Animation ist der Reihe nach rückwärts abgespielt

normal Die Animation sollte normal abgespielt werden (Standard)

alternativ Die Animation sollte der Reihe nach rückwärts abgespielt werden

animation-direction：normal;
-webkit-animation-direction:alternate;

Ein kleines Quadrat in die Richtung bewegen lassen von unten rechts und oben links

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demo;
animation-iteration-count：infinite;
animation-duration:2s;
animation-timing-function:ease;
animation-delay:0.1s;
animation-direction: alternate; 
｝
/* Safari and Chrome 浏览器*/
-webkit-animation:demo;/*设置动画名称*/
-webkit-animation-iteration-count：infinite;/*动画执行次数*/
-webkit-animation-duration:5s;/*动画花费时间*/
-webkit-animation-timing-function:ease;/*动画速度*/
-webkit-animation-delay:2s;/*动画延迟*/
-webkit-animation-direction: alternate; /*动画是否反向*/
}
/*设置动画运行区域*/
@keyframes demo
{
	0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
/*Safari and Chrome浏览器*/
@-webkit-keyframes demo
{
    0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
</style>

Rendering:

Zusammenfassung: Das Obige ist der Inhalt dieses Artikels dieser Artikel

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