Al habla un novato, Duda facil y rapida, espero respuesta rápida por favor!

AvenD · #1 (**permalink**) 28/02/2012, 08:29

Hola!, bueno, no esntiendo mucho sobre este mundo, precisamente por eso estoy aprendiendo por cuenta propia, hace unas semanas comencé a aprender CSS y hoy probando codigo (es como aprendo) me he encontrado con que una regla CSS no se ejecutaba como se supone que deberia.

He probado de mil formas, y espero que al menos aqui me digais en donde esta el fallo, comprendo que es algo de muy poca relevancia, facil y frugal, pero por favor, no os enfadeis ya que yo solo hace unos dias que llevo con CSS.

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#mydiv {

width:150px;
height:150px;
background:#333333;


-webkit-transform:translateX(1080px);
-moz-transform:translateX(1080px);

-webkit-transition:all 2s ease-in;
-moz-transition:all 2s ease-in;
	
}


</style>
</head>

<body>

<div id="mydiv"></div>

</body>
</html>

¿por que no se ejecuta la regla transicion? de 0 a 1080 pixeles en el eje X

Se que es mucho codigo, pero es para que veais entero el documento XHTML, con su head y body.

Bueno gracias de antemano!

AvenD · #2 (**permalink**) 28/02/2012, 08:32

Bueno, me faltaba por decir que el recuadro (el div) aparace directamente en 1080px , quiero decir que no ejecuta la transicion de 0 a 1080px.

Perdonad

C2am · #3 (**permalink**) 28/02/2012, 08:40

Hola
Primero, el título del post hace que no quiera entrar, o entrar y ... bue, me entiendes ¿no?
Si la duda es fácil entonces puedes resolverla sin ayuda.
Y la frutilla del postre espero respuesta rápida por favor! . Este es un foro, no un chat.

Pero como eres primerizo te pido que te tomes el tiempo de leer esto
Sobre todo esto donde podrás encontrar esto:

Cita:

El título de tu mensaje es lo primero que un usuario puede ver sobre tu consulta, y es la primera oportunidad que tienes de llamarle la atención para que te ayude. Pero no debes usar títulos que reclaman ayuda urgente, todos con mayúsculas o cosas por el estilo.

Bueno, lista la bienvenida, ahora a la cuestión

¿Porque dices que no funciona? ¿El div donde lo ves?

Saludos

kseso? · #4 (**permalink**) 28/02/2012, 08:42

las transition se suelen definir para un evento, como por ejemplo hacer :hover.
Si no es así, con el valor traslate es como si les declarase directamente un left:X.
Al cargar el html el navegador que ya tiene leído el css lo aplica diréctamente y el efecto no se muestra.

Si no lo quiere desencadenar con un evento, esto es, que se realice de forma automática, use las @key-frames.

Y anótese las sugerencias de C2am. Las formas (buenas) es un todo.

AvenD · #5 (**permalink**) 28/02/2012, 08:47

Cita:

Iniciado por C2am

Hola
Primero, el título del post hace que no quiera entrar, o entrar y ... bue, me entiendes ¿no?
Si la duda es fácil entonces puedes resolverla sin ayuda.
Y la frutilla del postre espero respuesta rápida por favor! . Este es un foro, no un chat.

Pero como eres primerizo te pido que te tomes el tiempo de leer [URL="http://www.forosdelweb.com/faq.php?faq=vb_faq#faq_como_preguntar"]esto[/URL]
Sobre todo [URL="http://www.forosdelweb.com/faq.php?faq=como_preguntar#faq_elegiruntituloaprop iadoparalapregunta"]esto[/URL] donde podrás encontrar esto:

Bueno, lista la bienvenida, ahora a la cuestión

¿Porque dices que no funciona? ¿El div donde lo ves?

Saludos

Lo siento, es que no suelo participar en foros, para el siguiente tema tendre en mente todo lo que me has dicho!

AvenD · #6 (**permalink**) 28/02/2012, 08:49

Cita:

Iniciado por kseso?

las transition se suelen definir para un evento, como por ejemplo hacer :hover.
Si no es así, con el valor traslate es como si les declarase directamente un left:X.
Al cargar el html el navegador que ya tiene leído el css lo aplica diréctamente y el efecto no se muestra.

Si no lo quiere desencadenar con un evento, esto es, que se realice de forma automática, use las @key-frames.

Y anótese las sugerencias de C2am. Las formas (buenas) es un todo.

Un amigo me dijo que si se podian usar transform + transicion para hacer un efecto de movimiento unico, por ejemplo al de un logo ...

kseso? · #7 (**permalink**) 28/02/2012, 08:57

¿Quiere que se muestre el efecto de traslación al cargarse la página única y exclusivamente?
Añádale el valor de delay.

AvenD · #8 (**permalink**) 28/02/2012, 09:12

y como hago eso?

alivan · #9 (**permalink**) 28/02/2012, 09:37

Cita:

Iniciado por AvenD

y como hago eso?

http://www.w3schools.com/cssref/css3_pr_transition-delay.asp
http://dochub.io/#css/transition-delay

AvenD · #10 (**permalink**) 28/02/2012, 10:00

muchas gracias!