Heim > Artikel > Web-Frontend > Hat der CSS3-Animationseffekt eine Verformung?
Hat der CSS3-Animationseffekt eine Verformung?
- WBOYOriginal
- 2022-04-28 14:20:031536Durchsuche
Der Animationseffekt in CSS3 weist eine Verformung auf. Sie können „Animation: Animationsattribut @keyframes ..{..{transform: Verformungsattribut}}“ verwenden, um den Animationsstil der Verformung festzulegen. und das Transformationsattribut wird verwendet, um den Transformationsstil festzulegen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Verfügt der CSS3-Animationseffekt über eine Verformung?
Der CSS3-Animationseffekt weist eine Verformung auf.
Verformung kann das Transformationsattribut in CSS verwenden. Das Transformationsattribut wendet eine 2D- oder 3D-Transformation auf das Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
Sie können das Animationsattribut verwenden, um die Animation festzulegen. Dieses Attribut ist ein Kurzattribut, das festgelegt werden kann:
Animationsname gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss. .
animation-duration gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.
animation-timing-function gibt die Geschwindigkeitskurve der Animation an.
animation-delay gibt die Verzögerung vor dem Start der Animation an.
animation-iteration-count gibt an, wie oft die Animation abgespielt werden soll.
animation-direction gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.
Das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background:pink;
margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
100%{transform:rotate(180deg) scale(0.5,0.5);}
}
</style>
</head>
<body>
<div class="div1">这是一个旋转缩放的效果</div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonHat der CSS3-Animationseffekt eine Verformung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!