transicion - ¿Diferentes retrasos de transición de CSS para pasar el mouse y mouseout?

mostrar texto al pasar el mouse sobre una imagen html

Question

¿Es posible usar transiciones CSS3 con un cambio de retardo diferente entre "estados"? Por ejemplo, estoy tratando de hacer que un elemento sea inmediatamente más alto al pasar el mouse y luego ''mouseout'' para esperar un segundo antes de volver a la altura inicial del elemento.

Página de demostración: jsfiddle.net/RTj9K (recuadro negro en el ángulo superior derecho)

CSS: #bar { transition:.4s ease-out 0, 1s; } #bar { transition:.4s ease-out 0, 1s; }

Pensé que los tiempos al final estaban relacionados con la demora, pero no parece funcionar de la manera que había imaginado.

Answer 1

Aquí hay un ejemplo simplificado de JSFiddle . Básicamente, necesitas la propiedad de transition-delay :

#transform {
    height:40px;
    width:40px;
    background-color:black;
    transition: .4s ease-out; 
    transition-delay: 2s;
    /*or shorthand: transition: .4s ease-out 2s;*/
}

#transform:hover {
    transition: .4s ease-out; 
    width:400px;
}

Answer 2

Si desea diferentes retrasos de transición de CSS al hover mouseout y al mouseout , debe configurarlos con los selectores correspondientes. En el siguiente ejemplo, cuando un elemento está suspendido, la demora inicial en el vuelo mouseout es 0 pero en mouseout la transición se retrasa en 1s .

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }

Puede encontrar el CSS completo en la demostración actualizada de mi pregunta a continuación. He usado la propiedad de transition taquigrafía, el orden de los valores es:

transition:<property> <duration> <timing-function> <delay>;

Demostración de respuesta: http://jsbin.com/lecuna/edit?html,css,output

Answer 3

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }

Solo para decir que esto no funcionará si no ingresas el símbolo ''s'' (segundos), entonces:

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }   /* note "0s" */