Heim > Artikel > Web-Frontend > So implementieren Sie eine Rotationsanimation in CSS3
So implementieren Sie eine Rotationsanimation in CSS3
- 青灯夜游Original
- 2021-12-16 15:13:297846Durchsuche
Implementierungsmethode: 1. Verwenden Sie die Anweisung „@keyframes Animationsname {50% {transform: rotieren(Rotationswinkel);}“, um eine Rotationsanimation zu erstellen. 2. Verwenden Sie die Anweisung „Element {animation: Animationsname Zeit unendlich;}“ " Anweisung zum Drehen Die Animation wird auf das angegebene Element angewendet.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
css3 implementiert eine Rotationsanimation
1 Wenn Sie CSS3 zum Implementieren einer Animation verwenden möchten, müssen Sie das Animationsattribut und die Regel „@keyframes“ verwenden.
@keyframes ist eine Regel von CSS3, mit der sich das Verhalten eines Zyklus von CSS-Animationen definieren und einfache Animationen erstellen lassen.
Animationen ähneln Übergängen darin, dass sie Darstellungen sich ändernder CSS-Eigenschaften im Laufe der Zeit darstellen. Der Hauptunterschied besteht darin, dass der Übergang implizit ausgelöst wird, wenn sich der Eigenschaftswert ändert (z. B. wenn sich der Eigenschaftswert beim Schweben ändert), die Animation jedoch explizit ausgeführt wird, wenn die animierte Eigenschaft angewendet wird. Daher müssen Animationen explizite Werte für animierte Eigenschaften anzeigen. Diese Werte werden durch die in der @keyframes-Regel angegebenen Animations-Keyframes definiert. Daher besteht die @keyframes-Regel aus einer Reihe gekapselter CSS-Stilregeln, die beschreiben, wie sich Eigenschaftswerte im Laufe der Zeit ändern.
Anschließend können Sie mithilfe verschiedener CSS-Animationseigenschaften viele verschiedene Aspekte der Animation steuern, einschließlich der Anzahl der Iterationen der Animation, ob zwischen Start- und Endwerten gewechselt wird und ob die Animation ausgeführt oder angehalten werden soll. Animationen können auch ihre Startzeit verzögern.
Syntax:
/* 定义动画*/
@keyframes 动画名称{
/* 样式规则*/
}
/* 将它应用于元素 */
.element {
animation-name: 动画名称（在@keyframes中已经声明好的）;
/* 或使用动画简写属性*/
animation: 动画名称 1s ...
}2. Verwenden Sie transform: rotate(旋转角度) in der „@keyframes“-Regel, um die Rotationsaktion zu steuern.
Implementierungscode:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: pink;
margin: 100px;
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove {
50% {
transform: rotate(360deg);
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
50% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Rotationsanimation in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!