para - CSS: Animación vs. Transición

animation css examples

Question

Entonces, entiendo cómo realizar transiciones y animaciones de CSS3. Lo que no está claro, y he buscado en Google, es cuándo usarlo.

Por ejemplo, si quiero hacer rebotar una pelota, está claro que la animación es el camino a seguir. Podría proporcionar fotogramas clave y el navegador haría los cuadros intermedios y tendré una buena animación.

Sin embargo, hay casos en que dicho efecto se puede lograr de cualquier manera. Un ejemplo simple y común sería implementar el menú del cajón deslizante estilo facebook:

Este efecto se puede lograr a través de transiciones como esta:

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

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

http://jsfiddle.net/NwEGz/

O bien, a través de animaciones como estas:

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

Con HTML que se ve así:

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

Y, este guión jQuery acompañante:

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

Lo que me gustaría entender es cuáles son los pros y los contras de estos enfoques.

1. Una diferencia obvia es que la animación está tomando mucho más código.
2. La animación le da una mejor flexibilidad. Puedo tener diferentes animaciones para deslizamiento y en
3. ¿Hay algo que se pueda decir sobre el rendimiento? ¿Ambos aprovechan la aceleración h / w?
4. ¿Cuál es más moderno y el camino a seguir?
5. ¿Algo más que puedas agregar?

Answer 1

1. La animación requiere mucho más código a menos que uses la misma transición una y otra vez, en cuyo caso una animación sería mejor.

2. Puede tener diferentes efectos para deslizarse dentro y fuera sin una animación. Simplemente tenga una transición diferente tanto en la regla original como en la regla modificada:

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

3. Las animaciones son solo abstracciones de transiciones, por lo que si la transición es hardware acelerada, la animación será. No hace ninguna diferencia.

4. Ambos son muy modernos.

5. Mi regla empírica es si uso la misma transición tres veces, probablemente debería ser una animación. Esto es más fácil de mantener y alterar en el futuro. Pero si solo lo está utilizando una vez, escribir más es para hacer la animación y quizás no valga la pena.

Answer 2

Creo que la animación CSS3 vs transición CSS3 le dará la respuesta que desee.

Básicamente a continuación hay algunos consejos para llevar:

1. Si el rendimiento es una preocupación, entonces elija la transición CSS3.
2. Si el estado debe mantenerse después de cada transición, elija la transición CSS3.
3. Si la animación necesita repetirse, elija la animación CSS3. Porque es compatible con el recuento de iteración de animación.
4. Si se desea una animación complicada. Entonces se prefiere la animación CSS3.

Answer 3

Dejaré que las definiciones hablen por sí mismas (según Merriam-Webster):

Transición : un movimiento, desarrollo o evolución de una forma, etapa o estilo a otra

Animación : dotado de vida o las cualidades de la vida; lleno de movimiento

Los nombres se ajustan adecuadamente a sus propósitos en CSS

Entonces, el ejemplo que dio debería usar transiciones porque es solo un cambio de un estado a otro

Answer 4

Parece que tienes una idea de cómo hacerlo, pero no cuándo hacerlo.

Una transición es una animación , solo una que se realiza entre dos estados distintos, es decir, un estado de inicio y un estado final. Al igual que un menú de cajón, el estado de inicio podría estar abierto y el estado final podría estar cerrado, o viceversa.

Si desea realizar algo que no implique específicamente un estado de inicio y un estado final, o si necesita un control de grano más fino sobre los fotogramas clave en una transición, entonces debe usar una animación.

Answer 5

Las animaciones son solo eso: un comportamiento sin problemas del conjunto de propiedades. En otras palabras, especifica qué debería suceder con un conjunto de propiedades de elementos. Define una animación y describe cómo debe comportarse este conjunto de propiedades durante el proceso de animación.

Las transiciones en el otro lado especifican cómo una propiedad (o propiedades) debe realizar su cambio. Cada cambio Establecer un nuevo valor para cierta propiedad, ya sea con JavaScript o CSS, siempre es una transición, pero por defecto no es uniforme. Al establecer la transition en el estilo CSS, se define una forma diferente (uniforme) de realizar estos cambios.

Se puede decir que las transiciones definen una animación predeterminada que se debe realizar cada vez que la propiedad especificada ha cambiado.