CSS3 animation: mantener el último fotograma

Supongamos que haces una animación en CSS3 y quieres que al finalizar se mantenga en el último fotograma o keyframe de la animación.

Por defecto en las animaciones css una vez finaliza la animación, el elemento es restaurado de nuevo a su estilo original.

Hay una propiedad de animation que se llama -fill-mode, que define los valores que se aplican a la animación cuando ya no se está ejecutando. En nuestro caso, queremos que aplique al último keyframe («to» o «100%»), para ello usaremos el valor «forwards«.

Para verlo lo mejor con un ejemplo básico. Vamos hacer una caja que aparezca y desaparezca durante 2 seg. un total de 5 veces y que una vez finalice la animación en el 5º pase se mantenga en último keyframe (opacity:1):

.elemento {
    animation: aparece 2s;
    animation-iteration-count: 5;
    animation-fill-mode: forwards;
}
@keyframes aparece {
    from { opacity:0; }
    to { opacity:1; }
}