Mover un div con CSS3

xikoto · #1 (**permalink**) 18/12/2011, 16:08

Hola, quiero mover un div hacia la izquierda por ejemplo, y que cuando llegue al final del recorrido desaparezca. He provado con animation, pero me vuelve al punto de origen. Hay alguna forma para que esto no suceda?

kseso? · #2 (**permalink**) 18/12/2011, 17:32

Si adjunta sus códigos implicados (html+css) ayudaría.
Como sugerencia, si usa keyframes sólo necesita incluir el display none en los últimos frames (%) y que la animación sólo se realice una vez

cristian_cena · #3 (**permalink**) 18/12/2011, 17:44

Aquí tienes buenos ejemplos de animación con css3.

No queda claro lo que queres hacer, si podes postea el código.

Todo lo que implique alguna condición: "si hago esto entonces que suceda aquello" es bueno que lo manejes con un lenguaje de programación (siempre que css3 no lo resuelva ;)). Si usas javascript y conoces jquery, este plugin te puede venir muy bien para identificar el final del recorrido que necesitas; y en consecuencia, aplicar los cambios de estilos correspondientes.

PD: aca las especificaciones oficiales.
Estoy aprendiendo ya a leer en inglés un poco pero por las dudas:
kseso: ¿sabes si hay un sitio que publique las equivalentes de éstas en español, o algunas traducciones no oficiales?

xikoto · #4 (**permalink**) 19/12/2011, 03:42

--HTML--

Código PHP:

  <html> 
    <head> 
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
        <div id="caja"> 
        </div> 
    </body> 
</html>

--CSS--

Código PHP:

  #caja{ 
    width:400px; 
    height:400px; 
    background-color:red; 
    margin:0 auto; 
}

Ahora simplemente quiero que el div se mueva 400px a la izquierda y cuando finalice el movimiento desaparezca, pero que no vuelva al punto origen, que se quede ya desaparecido para el resto.

ZoroRoronoa · #5 (**permalink**) 19/12/2011, 10:12

Será inmediato en cuanto a cargado la pagina?
O sera cuando se aplique un hover o un click ?

xikoto · #6 (**permalink**) 19/12/2011, 10:23

Pongamos un click, pero el problema no es el cambiar el nobre de la animación al hacer click.

He provado el atributo animation, pero el div se me mueve a la izquierda y terminado la animación vuelve a su punto de origen. Problema, no quiero que me vuelva al punto de origen. Se entiende?

dual3nigma · #7 (**permalink**) 19/12/2011, 10:41

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:

Ver originalfrom {
  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:

Ver originalfrom {
  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 ;)

xikoto · #8 (**permalink**) 19/12/2011, 11:13

Gracias dual3nigma esto es lo que buscaba y google no sabia responderme ;)

kseso? · #9 (**permalink**) 19/12/2011, 13:45

Cristian:
No conozco ninguna página con la traducción ("oficial") al español de las especificaciones incluida sidar.org
Las que suelo consultar son en inglés (suerte que pese a mi gran desconocimiento el código es código).
Entre otras:
http://dev.w3.org/csswg/
https://developer.mozilla.org/en/CSS/CSS_Reference

Y para casos más puntuales (ejemplos o demos) san goole y ver código.