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):