examples - webkit firefox

¿Hay alguna forma de que la función-webkit-animtion-timing-se aplique a toda la animación en lugar de a cada fotograma clave?

Question

Soy un poco nuevo en animación, así que perdóname si me estoy perdiendo un concepto enorme aquí. Necesito animar una flecha que apunta a un punto en una curva, solo 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, siempre apuntando unos pocos píxeles debajo de ella.

Entonces, lo que hice fue configurar los fotogramas clave a lo largo de la línea de la curva utilizando CSS3:

 @-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 ejecuto esta animación utilizando -webkit-animation-timing-function: eas-in, aplica esa atenuación a cada fotograma clave individual, que definitivamente no es lo que quiero. Quiero que la flexibilización se aplique a toda la animación.

¿Hay alguna forma diferente de hacerlo? ¿Hay alguna propiedad para aplicar la flexibilización a la secuencia completa en lugar de cada fotograma clave?

Answer 1

Algunas referencias de amor para ti: http://www.w3.org/TR/css3-animations/

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

Es posible que desee hacer apilamiento de animaciones, como moverse a una ubicación, luego a otra, luego a otra en múltiples animaciones de fotogramas clave en lugar de solo una.

Answer 2

Cuando desee que diferentes funciones de aceleración 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 y un div secundario para aplicar la animación de opacidad. 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 aceleración que mejor le parezca. Sin embargo, repetiría lo que Duopixel dice acerca de la mezcla de curvas de suavizado y puntos de control fijos: en este caso, en realidad no debería necesitar animaciones, solo dos animaciones de 0%: 100%, una para el padre y otra para el niño.

Después de haber realizado muchas animaciones de CSS3, escribí esta guía para nuestro producto Sencha Animator, que contiene información útil sobre cómo hacer que las animaciones complejas funcionen con CSS3, incluso si no desea utilizar la herramienta.

Answer 3

No puede aplicar una función de aceleración sobre una serie de fotogramas clave porque le está diciendo específicamente al objeto que se encuentre en un punto específico en un momento específico. Si aplicó, por ejemplo, una facilidad en una serie de fotogramas clave, entonces al 25% del objeto se le exigiría un "punto de control", hasta que se acelere hasta alcanzar el 100%.

Si sus puntos son más o menos equidistantes, puede aplicar:

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

Y tu animación se verá más bien, menos buena, aunque sea un poco robótica.

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

 @-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 soportara animaciones a lo largo de una ruta, no necesitaría estos fotogramas clave y no tendría ningún problema en aplicar la simplificación a solo dos fotogramas clave.