CSS: animation vs transition

Donc, je comprends comment effectuer à la fois des transitions et des animations CSS3. Ce qui n'est pas clair, et j'ai recherché sur Google, c'est quand utiliser lequel.

Par exemple, si je veux faire rebondir une balle, il est clair que l'animation est la voie à suivre. Je pourrais fournir des images clés et le navigateur ferait les images intermédiaires et j'aurais une belle animation en cours.

Cependant, il existe des cas où un tel effet peut être obtenu dans les deux sens. Un exemple simple et courant serait d'implémenter le menu du tiroir coulissant de style facebook:

Cet effet peut être obtenu grâce à des transitions comme ceci:

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

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

http://jsfiddle.net/NwEGz/

Ou, à travers des animations comme celle-ci:

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

Avec du HTML qui ressemble à ceci:

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

Et, ce script jQuery d'accompagnement:

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

Ce que j'aimerais comprendre, c'est quels sont les avantages et les inconvénients de ces approches.

1. Une différence évidente est que l'animation prend beaucoup plus de code.
2. L'animation donne une meilleure flexibilité. Je peux avoir différentes animations pour glisser vers l'extérieur et l'intérieur
3. Y a-t-il quelque chose à dire sur la performance? Les deux profitent-ils de l'accélération h / w?
4. Ce qui est plus moderne et la voie à suivre
5. Avez-vous autre chose à ajouter?

On dirait que vous savez comment les faire, mais pas quand les faire.

Une transition est une animation , juste une qui est effectuée entre deux états distincts - c'est-à-dire un état de début et un état de fin. Comme un menu de tiroir, l'état de départ peut être ouvert et l'état final peut être fermé, ou vice versa.

Si vous souhaitez effectuer quelque chose qui n'implique pas spécifiquement un état de début et un état de fin, ou si vous avez besoin d'un contrôle plus fin sur les images clés dans une transition, vous devez utiliser une animation.

Je vais laisser les définitions parler d'elles-mêmes (selon Merriam-Webster):

Transition : un mouvement, un développement ou une évolution d'une forme, d'une étape ou d'un style à une autre

Animation : dotée de la vie ou des qualités de la vie; plein de mouvement

Les noms correspondent correctement à leurs objectifs en CSS

Ainsi, l'exemple que vous avez donné devrait utiliser des transitions car il ne s'agit que d'un changement d'un état à un autre

Une réponse plus courte et directe:

Transition:

1. Nécessite un élément déclencheur (: hover,: focus etc.)
2. Seulement 2 états d'animation (début et fin)
3. Utilisé pour des animations plus simples (boutons, menus déroulants, etc.)
4. Plus facile à créer mais moins de possibilités d'animation / d'effets

Animation @keyframes:

1. Il peut être utilisé pour des animations sans fin
2. Peut définir plus de 2 états
3. Pas de frontières

Les deux utilisent l'accélération du processeur pour un effet beaucoup plus doux.

1. L'animation prend beaucoup plus de code à moins que vous n'utilisiez la même transition à plusieurs reprises, auquel cas une animation serait meilleure.

2. Vous pouvez avoir différents effets pour glisser vers l'intérieur et l'extérieur sans animation. Ayez simplement une transition différente sur la règle d'origine et la règle modifiée:

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

3. Les animations ne sont que des abstractions de transitions, donc si la transition est accélérée matériellement, l'animation le sera. Ça ne fait aucune différence.

4. Les deux sont très modernes.

5. Ma règle de base est que si j'utilise la même transition trois fois, cela devrait probablement être une animation. C'est plus facile à maintenir et à modifier à l'avenir. Mais si vous ne l'utilisez qu'une seule fois, il est plus difficile de faire l'animation et cela ne vaut peut-être pas la peine.

Les animations ne sont que cela - un comportement fluide de l'ensemble de propriétés. En d'autres termes, il spécifie ce qui doit arriver à un ensemble de propriétés d'élément. Vous définissez une animation et décrivez comment cet ensemble de propriétés doit se comporter pendant le processus d'animation.

Les transitions de l'autre côté spécifient comment une propriété (ou des propriétés) doit effectuer leur modification. Chaque changement. Définir une nouvelle valeur pour certaines propriétés, que ce soit avec JavaScript ou CSS, est toujours une transition, mais par défaut, ce n'est pas fluide. En définissant transitionle style css, vous définissez une manière différente (fluide) d'effectuer ces modifications.

On peut dire que les transitions définissent une animation par défaut qui doit être effectuée à chaque fois que la propriété spécifiée a changé.

Y a-t-il quelque chose à dire sur la performance? Les deux profitent-ils de l'accélération h / w?

Dans les navigateurs modernes, l' accélération h / w se produit pour les propriétés filter, opacityet transform. C'est pour les animations CSS et les transitions CSS.

Je crois que l' animation CSS3 vs la transition CSS3 vous donnera la réponse que vous voulez.

Voici quelques points à retenir:

1. Si les performances sont un problème, choisissez la transition CSS3.
2. Si l'état doit être conservé après chaque transition, choisissez la transition CSS3.
3. Si l'animation doit être répétée, choisissez l'animation CSS3. Parce qu'il prend en charge le nombre d'itérations d'animation.
4. Si une animation compliquée est souhaitée. Ensuite, l'animation CSS3 est préférée.

Ne vous embêtez pas, ce qui est mieux. Ce que je veux dire, c'est que si vous pouvez résoudre votre problème avec seulement une ou deux lignes de code, faites-le plutôt que d'écrire un tas de codes qui entraîneront un comportement similaire. Quoi qu'il en soit, la transition est comme un sous-ensemble d'animation. Cela signifie simplement que la transition peut résoudre certains problèmes tandis que l'animation peut résoudre tous les problèmes. L'animation vous permet d'avoir le contrôle de chaque étape de 0% à 100%, ce que la transition ne peut pas vraiment faire. L'animation nécessite que vous écriviez un tas de codes tandis que la transition utilise une ou deux lignes de code pour obtenir le même résultat en fonction de ce sur quoi vous travaillez. Venant du point de JavaScript, il est préférable d'utiliser la transition. Tout ce qui implique seulement deux phases, c'est-à-dire le début et la fin, utilise la transition. Résumé, si c'est stressant, ne le faites pas