keyframes - css efectos texto movimiento

Problema de Webkit CSS Animation: ¿persiste el estado final de la animación?

Question

Esta pregunta ya tiene una respuesta aquí:

• Mantener el estado final al final de una animación CSS3 2 respuestas

Dada la siguiente animación CSS3 ....

<style type="text/css" media="screen">

.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
    -webkit-transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(100px);
  }

}
</style>

<div class="drop_box">  
    Hello world
</div>

El texto de Hello World se anima como se esperaba, disminuyendo 100px. Sin embargo, al final de la animación, vuelve a su posición original.

Claramente esto tiene sentido en CSSland. La animación se ha aplicado y ya no actúa sobre el elemento para que los estilos originales entren en vigencia. Sin embargo, me parece un poco extraño: seguramente si uno está animando un elemento en su lugar, entonces uno esperaría que la colocación persistiera.

¿Hay alguna manera de hacer que la posición final sea ''fija'' sin tener que recurrir a Javascript para etiquetar un nombre de clase o estilo en el elemento al final de la animación para corregir sus propiedades alteradas? Sé que las transiciones persisten , pero para la animación que tengo en cuestión (el ejemplo es solo para fines de demostración) las transiciones no proporcionan el nivel de control necesario. Sin esto, parece que las animaciones complejas solo son útiles para procesos circulares en los que el elemento vuelve a su estado original.

Answer 1

Creo que lo que podrías estar buscando es:

0% {
  -webkit-transform: translateY(0px);
}

100% {
  -webkit-transform: translateY(100px);
}

Esto debería dejarlo en el lugar correcto.

Answer 2

Otra forma de hacerlo, solo por diversión,

    <style type="text/css" media="screen">

.drop_box {
   position:absolute;
   top:100px;
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
  -webkit-transform: translateY(-100px);
  }

  to {
  -webkit-transform: translateY(0px);
  }

}
</style>

<div class="drop_box">  
Hello world
</div>

Answer 3

Puede usar -webkit-animation-fill-mode para mantener el estado final (o incluso extender el estado de inicio hacia atrás). Se agregó a WebKit hace un tiempo y se envió en iOS 4 y Safari 5.

-webkit-animation-fill-mode: forwards;

Answer 4

Si define el estado final en la clase, entonces debe hacer lo que quiera en el ejemplo:

.drop_box {
    -webkit-transform: translateY(100px);
    -webkit-animation-name: drop;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
}

Pero si su animación es impulsada por eventos de todos modos, probablemente terminará teniendo que usar un poco de JavaScript. La manera más fácil es hacer que la adición de la clase con el estado final sea lo que desencadena la animación para comenzar.

--editar

Consulte la respuesta de dino para obtener información sobre la propiedad animation-fill-mode agregada en el WD de abril de 2012 .

Answer 5

Solo para agregar a las excelentes respuestas aquí, podría usar un marco de JavaScript como jQuery Transit que maneje las transiciones CSS3 por usted.

Dependiendo de la cantidad de transiciones / efectos que vaya a realizar, esta puede ser una mejor solución para mantener su código limpio en lugar de mantenerse al día con un archivo CSS grande que tenga todos sus efectos.

Este es un one-liner muy simple que logra lo que quieres:

Javascript:

$(".drop_box").transition({y: "+=100px"}, 2000);

Demostración de JS Fiddle