transiciones - Aplicar las propiedades CSS cuando finaliza la transición

transition css examples

Question

¿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.

Answer 1

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.

Answer 2

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.

DEMO

Artículo sobre CSS-Tricks