CSS: animacja a przejście

Rozumiem więc, jak wykonywać przejścia i animacje CSS3. Nie jest jasne, a wyszukałem w Google, kiedy użyć którego.

Na przykład, jeśli chcę, aby piłka odbiła się, jasne jest, że najlepszym rozwiązaniem jest animacja. Mógłbym dostarczyć klatki kluczowe, a przeglądarka zrobiłaby klatki pośrednie i będę mieć niezłą animację.

Istnieją jednak przypadki, w których wspomniany efekt można osiągnąć w dowolny sposób. Prostym i typowym przykładem byłoby wdrożenie przesuwanego menu szuflady w stylu Facebooka:

Efekt ten można osiągnąć poprzez przejścia takie jak:

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

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

http://jsfiddle.net/NwEGz/

Lub za pomocą takich animacji:

.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/

Z HTML, który wygląda tak:

<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>

I ten towarzyszący skrypt jQuery:

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

Chciałbym zrozumieć, jakie są wady i zalety tych podejść.

1. Jedną oczywistą różnicą jest to, że animacja wymaga znacznie więcej kodu.
2. Animacja zapewnia większą elastyczność. Mogę mieć inną animację do wysuwania i wsuwania
3. Czy jest coś, co można powiedzieć o wydajności? Czy obaj korzystają z przyspieszenia w trybie h / w?
4. Który jest bardziej nowoczesny i stanowi przyszłość
5. Coś jeszcze możesz dodać?

Wygląda na to, że wiesz, jak to zrobić, ale nie kiedy.

Przejście to animacja , po prostu taka, która jest wykonywana między dwoma różnymi stanami - tj. Stanem początkowym i końcowym. Podobnie jak menu szufladowe, stan początkowy może być otwarty, a stan końcowy może być zamknięty lub odwrotnie.

Jeśli chcesz wykonać coś, co nie obejmuje stanu początkowego i końcowego lub potrzebujesz dokładniejszej kontroli ziarnistości nad klatkami kluczowymi w przejściu, musisz użyć animacji.

Niech definicje mówią same za siebie (według Merriam-Webster):

Przejście : ruch, rozwój lub ewolucja z jednej formy, etapu lub stylu do innej

Animacja : Obdarzony życiem lub cechami życia; pełen ruchu

Nazwy odpowiednio pasują do ich celów w CSS

Tak więc podany przykład powinien używać przejść, ponieważ jest to tylko zmiana z jednego stanu do drugiego

Krótsza odpowiedź, od razu do rzeczy:

Przejście:

1. Potrzebuje elementu wyzwalającego (: najechanie,: skupienie itp.)
2. Tylko 2 stany animacji (początek i koniec)
3. Używany do prostszych animacji (przyciski, menu rozwijane itp.)
4. Łatwiejsze do tworzenia, ale mniej możliwości animacji / efektów

Animacja @keyframes:

1. Może być używany do niekończących się animacji
2. Można ustawić więcej niż 2 stany
3. Żadnych granic

Oba używają przyspieszenia procesora, aby uzyskać znacznie płynniejszy efekt.

1. Animacja zajmuje dużo więcej kodu, chyba że używasz w kółko tego samego przejścia, w takim przypadku animacja byłaby lepsza.

2. Możesz mieć różne efekty wsuwania i wysuwania bez animacji. Po prostu zastosuj inne przejście zarówno dla oryginalnej, jak i zmodyfikowanej reguły:

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

3. Animacje to tylko abstrakcje przejść, więc jeśli przejście jest przyspieszane sprzętowo, animacja będzie. To nie robi różnicy.

4. Obie są bardzo nowoczesne.

5. Moja ogólna zasada jest taka, że ​​jeśli użyję tego samego przejścia trzy razy, prawdopodobnie powinna to być animacja. W przyszłości będzie to łatwiejsze do utrzymania i zmiany. Ale jeśli używasz go tylko raz, bardziej piszesz, aby utworzyć animację i być może nie warto.

Animacje są właśnie tym - płynnym zachowaniem zestawu właściwości. Innymi słowy, określa, co powinno się stać z zestawem właściwości elementu. Definiujesz animację i opisujesz, jak ten zestaw właściwości powinien zachowywać się podczas procesu animacji.

Przejścia po drugiej stronie określają, w jaki sposób właściwość (lub właściwości) powinna dokonywać zmian. Każda zmiana. Ustawienie nowej wartości dla określonej właściwości, czy to w JavaScript, czy CSS, jest zawsze przejściem, ale domyślnie nie jest płynne. Ustawiając transitionstyl css definiujesz inny (płynny) sposób wykonywania tych zmian.

Można powiedzieć, że przejścia definiują domyślną animację, która powinna być wykonywana po każdej zmianie określonej właściwości.

Czy jest coś, co można powiedzieć o wydajności? Czy obaj korzystają z przyspieszenia w trybie h / w?

W nowoczesnych przeglądarek H / W przyspieszenie odnosi się do właściwości filter, opacityi transform. Dotyczy to zarówno animacji CSS, jak i przejść CSS.

Wierzę, że animacja CSS3 vs przejście CSS3 da ci odpowiedź, której chcesz.

Zasadniczo poniżej znajduje się kilka wniosków:

1. Jeśli zależy Ci na wydajności, wybierz przejście CSS3.
2. Jeśli stan ma być utrzymywany po każdym przejściu, wybierz przejście CSS3.
3. Jeśli animacja wymaga powtórzenia, wybierz animację CSS3. Ponieważ obsługuje liczbę iteracji animacji.
4. Jeśli pożądana jest skomplikowana animacja. Preferowana jest animacja CSS3.

Nie przejmuj się tym, co jest lepsze. Mój dar jest taki, że jeśli możesz rozwiązać swój problem za pomocą jednej lub dwóch linii kodu, po prostu zrób to, zamiast pisać kilka kodów, które spowodują podobne zachowanie. W każdym razie przejście jest jak podzbiór animacji. Oznacza to po prostu, że przejście może rozwiązać pewne problemy, podczas gdy animacja z drugiej strony może rozwiązać wszystkie problemy. Animacja umożliwia kontrolę nad każdym etapem, począwszy od 0% aż do 100%, czego tak naprawdę przejście nie jest w stanie zrobić. Animacja wymaga napisania wielu kodów, podczas gdy przejście używa jednego lub dwóch wierszy kodu, aby uzyskać ten sam wynik, w zależności od tego, nad czym pracujesz. Wychodząc z punktu widzenia JavaScript, najlepiej jest użyć przejścia. Wszystko, co obejmuje tylko dwie fazy, tj. Rozpoczęcie i zakończenie użycia przejścia. Podsumowanie, jeśli jest to stresujące, nie