Welche Regeln müssen bei der Verwendung von CSS3-Animationen angewendet werden?-CSS-Tutorial-php.cn

Welche Regeln müssen bei der Verwendung von CSS3-Animationen angewendet werden?

(*-*)浩

Freigeben： 2019-06-04 18:02:56

Original

5614 Leute haben es durchsucht

CSS3 @keyframes-Regeln

Tag-Definition und Verwendungsanweisungen

Mit @keyframes-Regeln können Sie Animationen erstellen.

Erstellen Sie Animationen, indem Sie schrittweise von einer CSS-Stileinstellung zur anderen wechseln.

Sie können die CSS-Stileinstellungen während der Animation mehrmals ändern.

Geben Sie an, wann die Änderung erfolgt, indem Sie % oder die Schlüsselwörter „von“ und „bis“ verwenden, die mit 0 % bis 100 % identisch sind.

0 % bedeutet, dass die Animation beginnt, 100 % bedeutet, dass die Animation abgeschlossen ist. (Empfohlenes Lernen: CSS3-Video-Tutorial.)

Für eine optimale Browserunterstützung sollten Sie immer Selektoren für 0 % und 100 % definieren.

Hinweis: Verwenden Sie das Animationsattribut, um das Erscheinungsbild der Animation zu steuern, und verwenden Sie auch den Selektor, um die Animation zu binden. .

Syntax

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

Nach dem Login kopieren

Erforderlich. Ein oder mehrere zulässige CSS-Stilattribute

Wert

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。合法值： 0-100% from (和0%相同) to (和100%相同) 注意：您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

Beschreibung

Animationsname td>

Erforderlich. Definiert den Namen der Animation.

keyframes-selector

Erforderlich. Prozentsatz der Animationsdauer.

Zulässige Werte:

0-100 %von (wie 0 %)bis (wie 100 %)

Hinweis: Sie können eine Animation verwenden Keyframes-Selektoren.

css-styles

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3</title> 
    <style> 
        div
        {
        width:100px;
        height:100px;
        background:blue;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
        }
        
        @keyframes mymove
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
        
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
    </style>
</head>
<body>

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

<div></div>

</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWelche Regeln müssen bei der Verwendung von CSS3-Animationen angewendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!