Mover un div con CSS3

[dual3nigma]

Hola xikoto

Eso que comentas de que al terminar la animación vuelve a su punto de origen se llama "Animation Fill Mode" (animation-fill-mode, en safari será -webkit-animation-fill-mode)

Esta propiedad por default esta en "none" lo cual quiere decir que se iniciara la animación y se terminara y todo volverá a la normalidad

Tienes otras opciones:

animation-fill-mode: forwards Esto quiere decir que tu elemento se quedara con las propiedades del ultimo keyframe de la animación, osea que si tienes:

Código CSS:

from {
  opacity:1
}
 
to {
  opacity: 0
}
 

y utilizas animation-fill-mode: forwards, al terminal la animacion se quedara "oculto"

animation-fill-mode: backwards Esto quiere decir que si tu elemento tiene un delay desde el principio tendrá las propiedades del primer keyframe de la animación, ósea que si tienes:

Código CSS:

from {
  opacity:0
}
 
to {
  opacity: 1
}
 

y un delay de 1s, desde el principio tu elemento estará "oculto" y en 1seg comenzara la animación.

Y por ultimo: animation-fill-mode: both significa que tendra el comportamiento tanto de backwards como de forwards.

Saludos ;)