¿Hay alguna manera de aplicar la función -webkit-animtion-timing-a la animación completa en lugar de a cada fotograma clave?

Question

Soy un poco nuevo en la animación, así que perdónenme si me falta un gran concepto aquí. Necesito animar una flecha que apunta a un punto en una curva, digamos que es una curva cúbica por el bien de esta publicación. La flecha se mueve a lo largo de la línea de la curva, apuntando siempre unos pocos píxeles debajo de ella.

Entonces lo que hice, es I fotogramas clave de configuración a lo largo de la línea utilizando CSS3 de la curva:

@-webkit-keyframes ftch { 
0% { 
    opacity: 0; 
    left: -10px; 
    bottom: 12px; 
} 

25% { 
    opacity: 0.25; 
    left: 56.5px; 
    bottom: -7px; 
} 

50% { 
    opacity: 0.5;   
    left: 143px; 
    bottom: -20px; 
} 

75% { 
    opacity: 0.75; 
    left: 209.5px; 
    bottom: -24.5px; 
} 

100% { 
    opacity: 1; 
    left: 266px; 
    bottom: -26px; 
} 

}

Sin embargo, cuando corro esta animación usando webkit-animación-timing-function: facilidad -en, se aplica esa suavización a cada fotograma clave individual, que definitivamente no es lo que quiero. Quiero que la aceleración se aplique a toda la animación.

¿Hay alguna otra forma en que debería estar haciendo esto? ¿Hay alguna propiedad para aplicar la aceleración a toda la secuencia en lugar de a cada fotograma clave?

Answer 1

No se puede aplicar una función de aceleración sobre una serie de fotogramas clave porque específicamente le indica al objeto que se encuentre en un punto específico en un momento específico. Si aplica, por ejemplo, una facilidad de entrada en una serie de fotogramas clave, entonces al 25% el objeto estaría detrás de su "punto de control" requerido, y finalmente acelerará hasta alcanzar el 100%.

Si los puntos son más o menos la misma distancia, se puede aplicar:

.animatedobject { 
    -webkit-animation-timing-function: linear; 
} 

y su animación se verá más más menos bueno, aunque un poco robótico.

Un enfoque más natural sería acelerar, mantener la velocidad, y luego "freno":

@-webkit-keyframes ftch { 
0% { 
    opacity: 0; 
    left: -10px; 
    bottom: 12px; 
    -webkit-animation-timing-function: ease-in; 
} 

25% { 
    opacity: 0.25; 
    left: 56.5px; 
    bottom: -7px; 
    -webkit-animation-timing-function: linear; 
} 

50% { 
    opacity: 0.5;   
    left: 143px; 
    bottom: -20px; 
    -webkit-animation-timing-function: linear; 
} 

75% { 
    opacity: 0.75; 
    left: 209.5px; 
    bottom: -24.5px; 
    -webkit-animation-timing-function: linear; 
} 

100% { 
    opacity: 1; 
    left: 266px; 
    bottom: -26px; 
    -webkit-animation-timing-function: ease-out; 
} 
} 

Si webkit apoyado animaciones a lo largo de un camino que no tendría que estos fotogramas clave y que no tendría problemas para aplicar la aceleración a solo dos fotogramas clave.

Answer 2

Algunos amor referencia para usted: http://www.w3.org/TR/css3-animations/

Más específicamente: http://www.w3.org/TR/css3-animations/#timing-functions-for-keyframes-

Usted puede querer hacer apilamiento animación, tales como seguir a un solo lugar, y luego otro, y luego otro en múltiples animaciones de fotogramas clave en lugar de sólo uno.

Answer 3

Cuando desee que diferentes funciones de suavizado se apliquen a diferentes aspectos de una animación, debe separar sus animaciones anidando su contenido en dos divs.

En este caso, debe crear un div principal para aplicar una animación de movimiento a, y un div infantil para aplicar la animación de opacidad a. La animación de opacidad debe tener una curva de aceleración: lineal, y la animación de movimiento debe tener la función de relajación más adecuada para usted. Sin embargo, repetiría lo que dice Duopixel sobre la mezcla de curvas de relajación y puntos de control fijos; en este caso, no debería necesitar animaciones, solo dos 0%: 100% de animaciones, una para el padre y otra para el div infantil.

Después de haber hecho una gran cantidad de animación CSS3, escribí this guide para nuestro producto Sencha Animator, que contiene información útil sobre cómo obtener animaciones complejas trabajando con CSS3, incluso si no desea utilizar la herramienta.