Der Unterschied zwischen Animation und Übergang

Der Unterschied zwischen CSS3-Animation und JS-Animation

JS implementiert Frame-Animation
CSS3 implementiert Tween-Animation

• Frame-Animation: Verwenden Sie einen Timer, um das aktuelle Element in regelmäßigen Abständen zu ändern
• Tween-Animation: Übergang (Hinzufügen von Übergängen, solange sich der Status ändert, um eine Animation zu erzeugen) Animation (mehrere Knoten zur Steuerung der Animation) Die Leistung wird besser sein

Übergang

Übergang ist ein einfaches Animationsattribut, das als vereinfachte Version der Animation angesehen werden kann. Es wird normalerweise mit Ereignisauslösung verwendet und ist einfach und leicht zu verwenden.

Übergangseigenschaftswerte

Übergangsfunktionen

Übergänge müssen durch Ereignisse ausgelöst werden [wie z. B. das Hinzufügen einer Hover-Pseudoklasse]. Sie können nicht automatisch einmal beim Laden der Seite erfolgen und sie können nicht wiederholt erfolgen, es sei denn, sie werden wiederholt ausgelöst. Es gibt nur zwei Zustände: Start und Ende. Eine Übergangsregel kann nur ein Attribut definieren.

<Text>
    <div ></div>
</body>
<Stil>
    .Kasten {
        Höhe: 100px;
        Breite: 100px;
        Hintergrundfarbe: hellrosa;
        Übergang: Breite 1 s 0,5 s, leichtes Ein-Aus;
    }

    .box:hover {
        Breite: 200px;
    }
</Stil>

Die Wirkung ist wie folgt

Sie können den Übergang auch beim hover schreiben transition: width 1s 0.5s ease-in-out

.box:hover {
    Breite: 200px;
    Übergang: Breite 1 s 0,5 s, leichtes Ein-Aus;
}

Tatsächlich ist es auch möglich, beim Hovern zu schreiben, aber wenn ich mich aus dem Element heraus bewege, wird die Elementbreite sofort und ohne Übergang wiederhergestellt!
Der Grund ist ganz einfach. Man schreibt nur Transition on Hover, das heißt, die Pseudoklasse wird erst wirksam, wenn man mit der Maus darüber fährt.

Animation

Eigenschaftswerte der Animation

<Text>
    <div ></div>
</body>
<Stil>
.Kasten {
    Höhe: 200px;
    Breite: 200px;
    Animation: 3 s Typ vorwärts, abwechselnd, unendlich;
    Animations-Wiedergabestatus: läuft;
}

.box:hover {
    Animations-Wiedergabestatus: angehalten;
}

@keyframes Typ {
    aus {
        Hintergrund: gelbgrün
    }

    50 % {
        Hintergrund: gelb
    }

    Zu {
        Hintergrund: Aquamarin
    }
}
</Stil>

Pausieren, wenn die Maus hineingeht, und mit dem Farbwechsel fortfahren, wenn die Maus herausgeht

verwandeln

Zunächst ist zu beachten, dass das Transform-Attribut ein statisches Attribut ist. Sobald es in den Stil geschrieben ist, wird es direkt angezeigt und erscheint nicht im Animationsprozess. Mithilfe des Transform-Attributs können Elemente verschoben (translate), skaliert (scale), gedreht (rotate) und gespiegelt (skew) werden. Weitere detaillierte Parameter finden Sie im CSS3-Transform-Attribut.

Zusammenfassen

Oben finden Sie detaillierte Informationen zum Unterschied zwischen Animation und Übergang. Weitere Informationen zu Animation und Übergang finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!