transiciones - Aplicar las propiedades CSS cuando finaliza la transición
transition css examples (2)
Puede lograr esto colocando otro elemento dentro o fuera de. .something y aplicando el relleno y las transiciones de margen al nuevo elemento, pero con el valor de transition-delay establecido en el tiempo igual o mayor que el tiempo de su transición de box-shadow inicial.
Entonces, por ejemplo:
<div class="immediate">
<div class="later">
I can haz transitions.
</div>
</div>
Y CSS:
.immediate {
background: #eeb;
transition: box-shadow 300ms;
}
.immediate:hover {
box-shadow: 0 0 3px black;
}
.later {
margin: 0;
padding: 10px 0;
transition: all 400ms;
transition-delay: 300ms;
}
.later:hover {
margin: 10px 0;
padding: 0;
}
Esto realizará la transición box-shadow en 300 ms, y luego el margin y el padding en 400 ms (puede establecer este tiempo de transición en 0 si ese es el efecto que está buscando).
Puedes probarlo en jsFiddle: http://jsfiddle.net/gTVVk/2/
EDITAR: la respuesta de Duncan Beattie funcionará bien, a menos que necesite realizar diferentes transiciones en la misma propiedad. De lo contrario no tiene sentido complicar demasiado las cosas con divs anidados.
¿Cómo se aplican las propiedades de una declaración a un elemento después de que finalicen las transiciones de CSS3? Tengo algo como:
.something {
background: blue;
padding: 10px 0px;
background-clip: content-box;
transition: box-shadow 300ms;
}
.something:hover {
box-shadow: 0px 0px 3px blue;
padding: 0px;
margin: 10px 0px;
}
Me gustaría que las propiedades de relleno y margen en la declaración: hover se apliquen después de que la transición se realice en 300 ms.
Puedes agregar un retraso como este:
transition: box-shadow 300ms;
transition: padding 300ms 400ms;
el primero se iniciará al pasar el mouse y los últimos 300 ms, el segundo se iniciará después de 400 ms y, de nuevo, los últimos 300 ms.