CSS: Animation vs. Übergang

Ich verstehe also, wie man sowohl CSS3-Übergänge als auch Animationen durchführt. Was nicht klar ist und ich gegoogelt habe, ist, wann ich welche verwenden soll.

Wenn ich zum Beispiel einen Ball zum Abprallen bringen möchte, ist klar, dass Animation der richtige Weg ist. Ich könnte Keyframes bereitstellen und der Browser würde die Zwischenframes erstellen und ich werde eine schöne Animation haben.

Es gibt jedoch Fälle, in denen ein solcher Effekt in beiden Fällen erzielt werden kann. Ein einfaches und allgemeines Beispiel wäre die Implementierung des Schiebeschubladenmenüs im Facebook-Stil:

Dieser Effekt kann durch Übergänge wie folgt erreicht werden:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

Oder durch Animationen wie diese:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

Mit HTML sieht das so aus:

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

Und dieses begleitende jQuery-Skript:

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

Was ich verstehen möchte, ist, was die Vor- und Nachteile dieser Ansätze sind.

1. Ein offensichtlicher Unterschied ist, dass das Animieren viel mehr Code erfordert.
2. Animation bietet bessere Flexibilität. Ich kann verschiedene Animationen zum Aus- und Einrutschen haben
3. Gibt es etwas, was über Leistung gesagt werden kann? Nutzen beide die H / W-Beschleunigung?
4. Welches ist moderner und der Weg in die Zukunft
5. Könnten Sie noch etwas hinzufügen?

Es sieht so aus, als hätten Sie einen Überblick darüber, wie man sie macht, nur nicht, wann man sie macht.

Ein Übergang ist eine Animation , nur eine, die zwischen zwei verschiedenen Zuständen ausgeführt wird - dh einem Startzustand und einem Endzustand. Wie bei einem Schubladenmenü kann der Startzustand geöffnet und der Endzustand geschlossen sein oder umgekehrt.

Wenn Sie etwas ausführen möchten, das nicht speziell einen Start- und einen Endzustand umfasst, oder wenn Sie bei einem Übergang eine genauere Kontrolle über die Keyframes benötigen, müssen Sie eine Animation verwenden.

Ich werde die Definitionen für sich selbst sprechen lassen (laut Merriam-Webster):

Übergang : Eine Bewegung, Entwicklung oder Entwicklung von einer Form, Stufe oder einem Stil zu einer anderen

Animation : Ausgestattet mit Leben oder Lebensqualitäten; voller Bewegung

Die Namen passen angemessen zu ihren Zwecken in CSS

In dem von Ihnen angegebenen Beispiel sollten also Übergänge verwendet werden, da es sich nur um einen Wechsel von einem Zustand in einen anderen handelt

Eine kürzere Antwort, direkt zum Punkt:

Überleitung:

1. Benötigt ein auslösendes Element (: Hover ,: Fokus usw.)
2. Nur 2 Animationszustände (Start und Ende)
3. Wird für einfachere Animationen verwendet (Schaltflächen, Dropdown-Menüs usw.)
4. Einfacher zu erstellen, aber nicht so viele Animations- / Effektmöglichkeiten

Animation @keyframes:

1. Es kann für endlose Animationen verwendet werden
2. Kann mehr als 2 Zustände einstellen
3. Keine Grenzen

Beide verwenden die CPU-Beschleunigung für einen viel gleichmäßigeren Effekt.

1. Die Animation benötigt viel mehr Code, es sei denn, Sie verwenden immer wieder denselben Übergang. In diesem Fall wäre eine Animation besser.

2. Sie können verschiedene Effekte zum Ein- und Ausschieben ohne Animation verwenden. Haben Sie nur einen anderen Übergang sowohl für die ursprüngliche Regel als auch für die geänderte Regel:

   .two-transitions {
       transition: all 50ms linear;
   }
   
   .two-transitions:hover {
       transition: all 800ms ease-out;
   }

3. Animationen sind nur Abstraktionen von Übergängen. Wenn der Übergang also hardwarebeschleunigt ist, wird die Animation ausgeführt. Es macht keinen Unterschied.

4. Beide sind sehr modern.

5. Meine Faustregel lautet: Wenn ich denselben Übergang dreimal verwende, sollte es sich wahrscheinlich um eine Animation handeln. Dies ist in Zukunft einfacher zu warten und zu ändern. Wenn Sie es jedoch nur einmal verwenden, müssen Sie mehr tippen, um die Animation zu erstellen, und es lohnt sich möglicherweise nicht.

Animationen sind genau das - ein reibungsloses Verhalten von Eigenschaften. Mit anderen Worten, es gibt an, was mit den Eigenschaften eines Elements geschehen soll. Sie definieren eine Animation und beschreiben, wie sich diese Eigenschaften während des Animationsprozesses verhalten sollen.

Übergänge auf der anderen Seite geben an, wie eine Eigenschaft (oder Eigenschaften) ihre Änderung durchführen soll. Jede Änderung. Das Festlegen eines neuen Werts für bestimmte Eigenschaften, sei es mit JavaScript oder CSS, ist immer ein Übergang, aber standardmäßig nicht reibungslos. Durch Festlegen transitiondes CSS-Stils definieren Sie eine andere (reibungslose) Art und Weise, diese Änderungen durchzuführen.

Es kann gesagt werden , dass Übergänge eine Standard definieren Animation , die jedes Mal , wenn die angegebene Eigenschaft geändert durchgeführt werden sollte.

Gibt es etwas, was über Leistung gesagt werden kann? Nutzen beide die H / W-Beschleunigung?

In modernen Browsern tritt h / w Beschleunigung für die Eigenschaften filter, opacityund transform. Dies gilt sowohl für CSS-Animationen als auch für CSS-Übergänge.

Ich glaube , dass der Übergang von CSS3-Animation zu CSS3 Ihnen die gewünschte Antwort geben wird.

Grundsätzlich sind im Folgenden einige Imbissbuden aufgeführt:

1. Wenn die Leistung ein Problem darstellt, wählen Sie den CSS3-Übergang.
2. Wenn der Status nach jedem Übergang beibehalten werden soll, wählen Sie CSS3-Übergang.
3. Wenn die Animation wiederholt werden muss, wählen Sie CSS3-Animation. Weil es die Anzahl der Animationsiterationen unterstützt.
4. Wenn eine komplizierte Animation gewünscht wird. Dann wird die CSS3-Animation bevorzugt.

Mach dir keine Sorgen, was besser ist. Wenn Sie Ihr Problem mit nur ein oder zwei Codezeilen lösen können, tun Sie dies einfach, anstatt eine Reihe von Codes zu schreiben, die zu einem ähnlichen Verhalten führen. Wie auch immer, der Übergang ist wie eine Teilmenge der Animation. Es bedeutet einfach, dass der Übergang bestimmte Probleme lösen kann, während die Animation andererseits alle Probleme lösen kann. Mit der Animation können Sie jede Phase von 0% bis 100% steuern, was beim Übergang nicht wirklich möglich ist. Für die Animation müssen Sie eine Reihe von Codes schreiben, während beim Übergang eine oder zwei Codezeilen verwendet werden, um das gleiche Ergebnis zu erzielen, je nachdem, woran Sie arbeiten. Aus der Sicht von JavaScript ist es am besten, den Übergang zu verwenden. Alles, was nur zwei Phasen umfasst, dh Start und Ende, verwendet den Übergang. Zusammenfassung, wenn es stressig ist, nicht '