¿Es posible especificar una función de temporización personalizada para las transiciones de CSS?

Question

Uso las transiciones CSS con bastante frecuencia ahora, pero me resulta limitado para tener acceso a la facilidad de entrada, salida, etc. La opción curva de bezier parece permitir el mayor control, pero incluso esto no le permite especificar una aceleración real ecuación que simularía el relajamiento elástico, etc. ¿Hay alguna otra opción o es necesario recurrir a javascript para realizar este tipo de animación?

Answer 1

Encontré que no hay forma de hacer una transición elástica con CSS puro. Sin embargo, puedes hacer trampa y hacer una animación CSS. Esto es lo que usa la manzana en su sitio:

@-webkit-keyframes open-1 { 
    from { opacity:0; -webkit-transform:translate3d(210px, -145px, 0); } 
    25% { opacity:1; -webkit-transform:translate3d(-15.6px, 4.1px, 0); } 
    30% { opacity:1; -webkit-transform:translate3d(-10.3px, 2.7px, 0); } 
    35% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    40% { opacity:1; -webkit-transform:translate3d(4.5px, -1.2px, 0); } 
    45% { opacity:1; -webkit-transform:translate3d(2.9px, -0.8px, 0); } 
    50% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    55% { opacity:1; -webkit-transform:translate3d(-1.3px, 0.3px, 0); } 
    60% { opacity:1; -webkit-transform:translate3d(-0.8px, 0.2px, 0); } 
    65% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    70% { opacity:1; -webkit-transform:translate3d(0.4px, -0.1px, 0); } 
    75% { opacity:1; -webkit-transform:translate3d(0.2px, -0.1px, 0); } 
    80% { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
    85% { opacity:1; -webkit-transform:translate3d(-0.1px, 0, 0); } 
    90% { opacity:1; -webkit-transform:translate3d(-0.1px, 0, 0); } 
    to { opacity:1; -webkit-transform:translate3d(0, 0, 0); } 
} 

Estas animaciones se utilizan en buena medida en la propia web de Apple: http://www.apple.com/mac/

Obviamente, esto es de gran alcance, hasta cierto punto - ya que las animaciones son porcentajes que pueda cambia fácilmente la duración y conserva el efecto.

Sin embargo, esto sigue siendo muy estático. Digamos que desea hacer clic en un botón y hacer que realice una animación de escala elástica. No hay problema, una animación se puede usar una y otra vez para cada botón. Pero supongamos que desea que un elemento ajuste elásticamente su posición al lugar donde el usuario hizo clic o tocó más recientemente en la pantalla. Bien, en este caso necesitaría recalcular dinámicamente los fotogramas clave y luego aplicar la animación al elemento.

En el momento de escribir esto, no sé si hay buenos ejemplos de generación dinámica de animaciones CSS sobre la marcha dentro de javascript. De hecho, probablemente justifique otra pregunta. Con todo, esta es la única forma pura de CSS que encontré para hacer una ecuación de aceleración compleja, como la flexibilización elástica puramente con CSS.

Answer 2

Puede usar Caesar para generar CSS para diferentes ecuaciones.

Answer 3

Sé que si usted está utilizando mootools que podría escribir su propia ecuación:

http://mootools.net/docs/core/Fx/Fx.Transitions

Clase: Fx.Transition

Esta clase sólo es útil para las matemáticas genios que quieren escribir sus propias ecuaciones de aceleración . Devuelve una función de transición Fx con los métodos 'easeIn', 'easeOut' y 'easeInOut'.

Quizás las otras bibliotecas como jquery o prototype tengan la misma clase, probablemente tengan algo similar.

¡Buena suerte!

Answer 4

Actualmente, no necesita una biblioteca de JavaScript para admitir funciones de aceleración complejas como bounce-ease-in o elastic-ease-out. Aquí está la herramienta de CSS3 Animación generador que genera los fotogramas clave para usted, y permite a 12 funciones de aceleración adicionales no son compatibles con la especificación del W3C:

http://www.css3animationgenerator.com/