CSS: animacja a Przejście

Question

CSS: animacja a Przejście

Rozumiem więc, jak wykonywać zarówno przejścia CSS3, jak i animacje. To, co nie jest jasne, a ja wygooglowałem, to kiedy użyć którego.

Na przykład, jeśli chcę odbić piłkę, jasne jest, że animacja jest drogą. Mógłbym podać klatki kluczowe, a przeglądarka zrobiłaby klatki pośrednie i będę miał ładną animację.

Są jednak przypadki, gdy wspomniany efekt można osiągnąć w obie strony. Prostym i powszechnym przykładem byłoby wdrożenie facebook styl menu szuflady przesuwnej:

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 poprzez takie animacje:

.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ą plusy i minusy tego podejścia.

jedną z oczywistych różnic jest to, że animowanie wymaga dużo więcej kodu.
animacja daje większą elastyczność. Mogę mieć różne animacje do wysuwania i w
czy jest coś, co można powiedzieć o wydajności? Czy obie firmy korzystają z przyspieszenia h/w?

114

css css-transitions css3 css-animations

Author: Zentaurus, 2013-12-14

Source

5 answers

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 innego

Animacja : obdarzona życiem lub cechami życia; pełna ruchu

Nazwy odpowiednio pasują do swoich celów w CSS

Więc przykład, który podałeś powinien używać przejść, ponieważ jest to tylko zmiana z jednego stanu na inny

33

Author: Zach Saucier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-15 01:36:27

Animacja wymaga dużo więcej kodu, chyba że używasz tego samego przejścia w kółko, w takim przypadku animacja byłaby lepsza.
Możesz mieć różne efekty do przesuwania się i wychodzenia bez animacji. Po prostu mają inne Przejście zarówno na oryginalną regułę, jak i zmodyfikowaną regułę:
```
.two-transitions {
    transition: all 50ms linear;
}

.two-transitions:hover {
    transition: all 800ms ease-out;
}
```
Animacje są tylko abstrakcjami przejść, więc jeśli przejście jest przyspieszane sprzętowo, animacja będzie. To sprawia, że nie różnica.
Oba są bardzo nowoczesne.
Moja zasada jest taka, że jeśli użyję tego samego przejścia trzy razy, prawdopodobnie powinna to być animacja. Jest to łatwiejsze do utrzymania i zmiany w przyszłości. Ale jeśli używasz go tylko raz, jest to bardziej pisanie, aby animacja i może nie warto.

7

Author: paulcpederson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-15 01:04:46

Animacje to po prostu płynne zachowanie zestawu właściwości. Innymi słowy określa co powinno się stać ze zbiorem właściwości elementu. Definiujesz animację i opisujesz, jak ten zestaw właściwości powinien zachowywać się podczas procesu animacji.

Transitions po drugiej stronie określa Jak właściwość (lub właściwości) powinna wykonać swoją zmianę. Każda zmiana. Ustawianie nowej wartości dla określonej właściwości, czy to za pomocą JavaScript czy CSS, jest zawsze przejściem, ale domyślnie nie jest płynne. Ustawiając transition w stylu css definiujesz inny (płynny) sposób wykonywania tych zmian.

Można powiedzieć, że transitions definiują domyślną animację , która powinna być wykonywana za każdym razem, gdy określona właściwość ulegnie zmianie.

2

Author: Jonan Georgiev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-11 21:23:03

Wierzę, że CSS3 animation vs CSS3 transition da ci odpowiedź, którą chcesz.

Zasadniczo poniżej kilka propozycji na wynos:

Jeśli wydajność jest problemem, wybierz CSS3 transition.
jeśli stan ma być zachowany po każdym przejściu, wybierz Przejście CSS3.
jeśli animacja ma być powtórzona, wybierz animację CSS3. Ponieważ obsługuje animation-iteration-count.
jeśli pożądana jest skomplikowana animacja. Animacja CSS3 jest preferowany.

-1

Author: PixelsTech,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-17 15:35:24

score 159 · Accepted Answer

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

A transition jest animacją, tylko taki, który jest wykonywany pomiędzy dwoma odrębnymi Stanami - tj. stanem początkowym i stanem końcowym. Podobnie jak menu szuflady, 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 konkretnie dotyczy stanu początkowego i stanu końcowego, lub potrzebujesz więcej grzywny grain kontroli nad klatek kluczowych w przejściu, następnie trzeba użyć animacji.