Heim >Web-Frontend >CSS-Tutorial >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:414572Durchsuche
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:
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!