Wie verwende ich das Animationsattribut? Detaillierte Erklärung des Animationsattributs-CSS-Tutorial-php.cn

Wie verwende ich das Animationsattribut? Detaillierte Erklärung des Animationsattributs

云罗郡主

Freigeben： 2018-11-20 17:01:41

nach vorne

4584 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung des Animationsattributs. Eine detaillierte Erklärung des Animationsattributs hat einen gewissen Referenzwert. Ich hoffe, es wird für Sie hilfreich sein.

animation-duration-Attribut

In CSS3 können wir das animation-duration-Attribut verwenden, um die Dauer der Animation festzulegen, also die Gesamtzeit, die zum Abschluss benötigt wird, von 0 % auf 100 %. . Die Eigenschaft „animation-duration“ ähnelt der Eigenschaft „transition-duration“ in CSS3-Übergängen.

Syntax:

animation-duration:时间；

Nach dem Login kopieren

Beschreibung:

Der Wert des Attributs „animation-duration“ ist eine Zeit, die Einheit ist s (Sekunden), es kann eine Dezimalzahl wie 0,5 s sein .

Beispiel:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-duration属性</title>
    <style type="text/css">
        @-webkit-keyframes mytranslate
        {
            0%{}
            100%{-webkit-transform:translateX(100px);}
        }
        div:not(#container)
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            -webkit-animation-name:mytranslate;
            -webkit-animation-timing-function:linear;
        }
        #container
        {
            display:inline-block;
            width:140px;
            border:1px solid silver;
        }
        #div1{-webkit-animation-duration:2s;margin-bottom:10px;}
        #div2{-webkit-animation-duration:4s;}
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Wie verwende ich das Animationsattribut? Detaillierte Erklärung des Animationsattributs

Analyse:

In diesem Beispiel setzen wir #div1 Die Elementanimationsdauer beträgt 2 Sekunden und die Elementanimationsdauer von #div2 ist auf 4 Sekunden festgelegt. Bei Online-Tests können wir den Effekt deutlich erkennen.

Lassen Sie mich hier sagen, dass CSS3-Animationen häufig mit CSS3-Transformationen kombiniert werden, um wunderschöne und komplexe Animationseffekte zu erzielen.

Das Obige ist eine vollständige Einführung in die Verwendung des Animationsattributs. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, beachten Sie bitte Chinesische PHP-Website.

Das obige ist der detaillierte Inhalt vonWie verwende ich das Animationsattribut? Detaillierte Erklärung des Animationsattributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!