[SOLUCIONADO] No funciona la transición

[gerard094]

Estoy intentando aplicar una transición de background-color, en el div #cajafolio

Y no se aplica como transición, probé con otros atributos (height y width) y si funciona, pero con background color no.

Aquí CSS y pagina web:

Código:

#cajafolio{
width:70%;
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
height:300px;
margin-left:150px;
background: -webkit-linear-gradient(white 45%, #911CD1 );
-webkit-transition:all 1s ease-out;  /* Chrome y Safari */
-o-transition:all 1s ease-out;  /* Opera */
-moz-transition:all 1s ease-out;  /* Mozilla Firefox */
-ms-transition:all 1s ease-out;   /* Internet Explorer */
transition:all 1s ease-out;  /* W3C */
}

#cajafolio:hover{
background: -webkit-linear-gradient(white 65%, #911CD1 );
}

http://www.shersydesign.com/portfolio

[pzin]

Básicamente es lo que acabo de contestar aquí.

No todo es animable en CSS.

[gerard094]

Iniciado por pzin

Básicamente es lo que acabo de contestar aquí.

No todo es animable en CSS.

Que desgracia, que efecto me recomendás en ese div? (Iría una descripción de la utilidad de un sitio web),

[pzin]

Si quieres animar el fondo puedes hacerlo, lo que no puedes anima es background-image, pero por ejemplo background-position si que puedes.

[gerard094]

Realicé el siguiente cambio y no hay transción alguna:

Código:

#cajafolio{
background-image:url(http://www.shersydesign.com/wp-content/uploads/2013/12/fondofolio.png);
width:70%;
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
height:300px;
margin-left:150px;
background-position: 40% 20%; 
transition-delay:2s;
}
#cajafolio:hover{
background-position:bottom;
}

Por lo visto ni siquiera el fondo responde a la posición que le doy

[jonni09lo]

Pues la imagen que estás usando de background ocupa todo el alto, como quieres que se muestre la trancision

Mira esto (añadí no-repeat y aumenté el doble del tamaño del contenedor)

Saludos

[gerard094]

Pero no hay transición aún cambiando el tamaño, es un cambio brusco

[jonni09lo]

Porque tomé TÚ código y si notas no has definido el tipo de transición que quieres hacer...

Saludos

[gerard094]

Gracias, que torpe me faltó eso.

Ya que tengo su atención, como puedo hacer para que al quitar el mouse del div este vuelva a su tamaño original pero con la velocidad que tiene el mouse:hover?

Y otra cosa, como era para ocultar el contenido de un div cuando este sobrepasa las dimensiones?

(Se puede ver en mi sitio ahora mismo)

[jonni09lo]

Que con la misma velocidad que baje, suba?

Coloca

Código CSS:

transition: all 2s;
 

En vez de los dos transition que tienes (tanto en #cajaportafolio y #cajaportafolio:hover), ya que uno reemplaza al otro

Saludos

[gerard094]

Perfecto gracias, hay algún motivo por el cual el background no se mueva a la misma velocidad que el height al quitar el mouse? Ambos tienen la misma velocidad

[jonni09lo]

Por tamaños, si tu notas la velocidad de la transición es proporcional al tamaño, a mayor tamaño, mayor velocidad. Por ende las dos velocidades (background y height) solo irán a la misma velocidad si tienen el mismo tamaño.

PD: Puedes especificar varias transiciones de esta manera:

Código CSS:

transition: height 2s, background 1s;
 

De esa manera puedes jugar con los tiempos y lograr que tengan la misma velocidad
Saludos

[gerard094]

Muchas gracias, me salvaste de varias.
Marco como solucionado