Heim > Artikel > Web-Frontend > Wie verwende ich das Animationsattribut? Detaillierte Erklärung des Animationsattributs

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

云罗郡主nach vorne: 2018-11-20 17:01:414511Durchsuche

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:时间；

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>

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:lvyestudy.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verwende ich das Attribut „animation-name“, um eine Animation aufzurufen? Ausführliche Erläuterung der Eigenschaft „Animationsname“.Nächster Artikel：Wie verwende ich das Attribut „animation-name“, um eine Animation aufzurufen? Ausführliche Erläuterung der Eigenschaft „Animationsname“.

In Verbindung stehende Artikel

Mehr sehen