Cómo hacer parpadear un elemento con CSS

A veces es interesante llamar la atención sobre un elemento dentro de una página web, por ejemplo un botón o una advertencia.

Para hacerlo se puede usar una clase CSS que haga parpadear un elemento un par de veces para captar la atención.

Se puede hacer con este código CSS:

.animated {
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
@-webkit-keyframes flash {
 0%, 50%, 100% {
 opacity: 1;
 }
25%, 75% {
 opacity: 0;
 }
}
@keyframes flash {
 0%, 50%, 100% {
 opacity: 1;
 }
25%, 75% {
 opacity: 0;
 }
}
.flash {
 -webkit-animation-name: flash;
 animation-name: flash;
}

Luego basta con hacer una llamada a esa clase desde el elemento añadiendo animated flash.

Aquí se puede ver el código fuente de un ejemplo que lo usa.
Aquí se puede ver un ejemplo funcionando, el elemento seleccionado parpadea al cargarse.