[SOLUCIONADO] Animación de texto en CSS

[rodeirojg]

Buenas gente del foro!

Les comento que estoy animando un menú, el cual debería pasar de una instancia a otra en forma suave. Acá están las capturas de un punto y el otro (para que se den una idea).




El tema es que se me complica mucho hacer aparecer el texto por derecha, hacer que el vínculo se corra a la izquierda suavemente (y no de repente).

Estoy usando este código CSS por ahora:

Código HTML:

#button {
position: relative;
width: 675px;
margin-left: auto;
margin-right: auto;
color: #343434;
font-size: 28px;
text-align: right;
height: 52px;
background-color: #212121;
padding-top: 16px;

   -webkit-transition-property: background;
   -moz-transition-property: background;
   -o-transition-property:  background;
  	transition-property: background;
	
  -webkit-transition:all 0.5s ease-out;  /* Chrome y Safari */
  -o-transition:all 0.5s ease-out;  /* Opera */
  -moz-transition:all 0.5s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 0.5s ease-out; 
 } 
 #button:hover {
background-color: #800001;
text-align: left;
text-color: #CCC;
 }

Necesito su ayuda, no es mi fuerte el css pero me pidieron esa portada.

[Sarlit]

Cada vez que me pongo a hacer esas cosas suelo revisar esta página que me aclara bastante las ideas, echale un ojo a ver si a ti también te ayuda:

http://www.the-art-of-web.com/css/css-animation/

Mi consejo es que dividas el botón en dos div:

Código:

<div id=button >
<div id=left></div><div id=right></div>
</div>

Te será más fácil hacer las animaciones así.

[martinmiranda90]

Hola!. Podrías poner el código html como va estructurado el menu?. Has conseguido hacer alguno de los objetivos que te pedían?.
Un saludo

[Sarlit]

A ver, no lo he probado pero a mi me parece fácil:

Básicamente divides el botón en tres divs, uno que sea el botón entero y dos más pequeños en los que metes los dos textos de cada botón, al primero le das todo el ancho y al segundo lo dejas a 0. Luego con :hover sobre el div principal le cambias el color a rojo y cambias los width de los dos divs hijos para que queden a tu gusto.

Si no os salé decídmelo y esta tarde publico el código

[rodeirojg]

Gracias a todos por sus respuestas!

Lo que estoy probando lo voy subiendo a este vínculo temporal:
http://www.julianrodeiro.com/cover/index.html

El tema quizás no sea tanto la animación, sino como imaginarme el funcionamiento. Por ejemplo lo que dice Sarlit, de dividirlo en varios Div's, no visualizo bien la manera en que actúe correctamente!

[mbm150]

Hola

Como te han dicho, tendras que dividir el boton en dos y aplicar los estilos por separado.

http://jsfiddle.net/mbm150/csjos1cq/

Más o menos asi.

Saludos.

[martinmiranda90]

Hola de nuevo. Estoy totalmente de acuerdo con el resto de compañeros. Mira aquí a ver si es lo que estas buscando:
[url]http://dabblet.com/gist/5357f2c789de27fca67b[/url]
Un saludo!

[rodeirojg]

Increíble muchachos!

Gracias por la dedicación y el esfuerzo. Ahora me voy a poner bien a ver el código así para la próxima ya comprendo mejor como funciona!

Saludos enormes!! Tema solucionado!