¿Cómo lograr animaciones de ida y vuelta con CSS?

[g3kdigital]

Iniciado por pzin

berkeleyPunk la función crea una [URL="http://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier"][I]Curva de Bézier[/I][/URL]. La cosa es que al poder poner números negativos, se crea una especie de animación extra —visualmente, ya que matemáticamente no lo es.

Yo suelo usar mucho este sitio para hacerlas menos artesalnamente: [url]http://cubic-bezier.com[/url]

Pues PZIN lo ha resumido bastante, yo tampoco lo había usado hasta que el lo menciono, me puse a investigar y encontré este [URL="http://www.cristalab.com/blog/10-secretos-de-css3-que-tal-vez-no-conocias-c102271l/"]link[/URL]: en el otro usuario recomendó precisamente la misma página que recomendó PZIN creada por Vea Lerou, cuando vi lo de los negativos, simplemente pensé ¿Qué tal y sí? .

El funcionamiento lo entiendo así:

La aceleración y la desaceleración se forman mediante esta curva. Los números equivalen a los coordinadas de los puntos "bezier" en el plano de coordenadas bezier y no de lo puntos de origen , no son del elemento en sí a animar ni del espacio o dimensiones relativas o absolutas al "padre" contenedor del elemento (lo digo, porque esto me confundió al principio).

Siendo la primera coordenada horizontal "x" y la segunda vertical "y". Se podría leer así:

( PI ( X , Y ) , PF ( X , Y ) ) => PI = Punto de Inicio & PF = PuntoFinal

Como curiosidad solo "Y" puede tomar valores negativos, dando como resultado este vistoso efecto.

Y bueno, debí mencionarlo como sí hizo PZIN, solo funciona para animaciones no tan complejas y creo que el el efecto de denomina "bouncing" y que si lo pensamos bien puede resultar bueno como sustituto del efecto flashero en botones o efectos hover: o :focus UI.

Y sí ya se puede dar por terminado el post Feliz día!.