So verwenden Sie die CSS-@keyframes-Regel-Front-End-Fragen und Antworten-php.cn

So verwenden Sie die CSS-@keyframes-Regel

青灯夜游

Freigeben： 2019-05-30 16:27:12

Original

3978 Leute haben es durchsucht

@keyframes ist eine CSS-Regel, mit der das Verhalten einer CSS-Animationsperiode definiert werden kann. Sie muss zusammen mit dem Animationsattribut verwendet werden, um einfache Animationseffekte zu erstellen. Verwenden Sie Animationseigenschaften, um das Erscheinungsbild von Animationen zu steuern und Animationen an Selektoren zu binden.

So verwenden Sie die CSS-@keyframes-Regel

Wie verwende ich CSS-@keyframes-Regeln?

Animationen können über @keyframes-Regeln erstellt werden.

Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

Nach dem Login kopieren

Animationsname: erforderlich. Definiert den Namen der Animation.

keyframes-selector: erforderlich. Prozentsatz der Animationsdauer.

Zulässige Werte:

●　0-100 %

●　von (wie 0 %)

●　bis (wie 100 %) )

css-styles Erforderlich. Ein oder mehrere zulässige CSS-Stilattribute

Beschreibung:

Das Prinzip der Animationserstellung besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen umzuwandeln. Dieser Satz von CSS-Stilen kann während der Animation mehrmals geändert werden.

Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen. 0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.

Hinweis: Bitte verwenden Sie die Animationseigenschaft, um das Erscheinungsbild der Animation zu steuern und die Animation an den Selektor zu binden.

css @keyframes-Attribut Beispiel

<!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>

<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

Nach dem Login kopieren

Rendering:

So verwenden Sie die CSS-@keyframes-Regel

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-@keyframes-Regel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!