web-dev-qa-db-fra.com

CSS: Animation vs. Transition

Je comprends donc comment effectuer les transitions et les animations CSS3. Ce qui n'est pas clair, et j'ai googlé, 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 animation agréable.

Cependant, il existe des cas où un tel effet peut être obtenu dans les deux sens. Un exemple simple et courant serait de mettre en œuvre le menu de tiroir coulissant de style facebook:

Cet effet peut être atteint par 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 celles-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 HTML, ça ressemble à ça:

<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 une animation différente pour glisser
  3. Peut-on dire quelque chose à propos de la performance? Est-ce que les deux profitent de l'accélération h/w?
  4. Qui est plus moderne et la voie à suivre
  5. Avez-vous quelque chose à ajouter?
csscss3css-transitionscss-animations
133
Code Poet

Il semble que vous sachiez comment les faire, mais pas quand.

Une transition est une animation , celle-ci n’exécutant que deux états distincts, c’est-à-dire un état de départ et un état de fin. Comme dans un menu de tiroir, l'état initial peut être ouvert et l'état final peut être fermé, ou inversement.

Si vous voulez effectuer quelque chose que ne fait pas implique spécifiquement un état de début et un état de fin, ou vous avez besoin de plus de grain fin contrôler les images clés dans une transition, vous devez alors utiliser une animation.

177
Adam

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

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

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

Les noms correspondent bien à 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'état

36
Zach Saucier

  1. L'animation nécessite beaucoup plus de code, sauf si vous utilisez la même transition à plusieurs reprises, auquel cas une animation serait préférable.

  2. Vous pouvez avoir différents effets pour entrer et sortir sans animation. Ayez simplement une transition différente sur la règle d'origine et sur 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. Ainsi, si la transition est accélérée matériellement, l'animation le sera. Ça ne fait pas de différance.

  4. Les deux sont très modernes.

  5. Ma règle d'or est que si j'utilise la même transition trois fois, il devrait probablement s'agir d'une animation. C’est plus facile à maintenir et à modifier à l’avenir. Mais si vous ne l'utilisez qu'une fois, il est préférable de taper pour créer l'animation et peut-être ne vaut-il pas la peine.

10
paulcpederson

Une réponse plus courte, directement sur le point:

Transition:

  1. Nécessite un élément déclencheur (: survol,: 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 peu de possibilités d'animation/d'effets

Animation @ images clés:

  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.

9
Grecdev

Animations ne sont que cela - un comportement fluide d'un ensemble de propriétés. En d'autres termes, il spécifie ce qui devrait arriver à un ensemble de propriétés d'élément. Vous définissez une animation et décrivez le comportement de cet ensemble de propriétés au cours du processus d'animation.

Transitions de l'autre côté spécifiez comment une propriété (ou des propriétés) doit effectuer sa 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 lisse. En définissant transition dans le style CSS, vous définissez différentes manières (lisses) d'effectuer ces modifications.

On peut dire que les transitions définissent une animation par défaut à exécuter chaque fois que la propriété spécifiée a changé.

3
Jonan Georgiev

Peut-on dire quelque chose à propos de la performance? Est-ce que les deux profitent de l'accélération h/w?

Dans les navigateurs modernes, une accélération h/w se produit pour les propriétés filter, opacity et transform. Ceci concerne à la fois les animations CSS et les transitions CSS.

2
Eric Willigers