Show css3 animate for 2 times

Question

i design bootstrap error box using flash CSS3 animate Like This code:

HTML:

<div class="alert alert-danger flashit">error error</div>

CSS:

.flashit {
    -webkit-animation: flash linear 1s infinite;
    animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes flash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .1;
    }
    100% {
        opacity: 1;
    }
}

this worked and work flash animated But, i need to show two times flash animate effect.

How do create this?

DEMO FIDDLE

Answer 1

Use the property animation-iteration that property works this way

defines the number of times an animation cycle should be played before stopping

In the shorthand you can add the value after the duration-time replacing the infinite value:

-webkit-animation: flash linear 1s 2 forwards;
animation: flash linear 1s 2 forwards;

Check your Demo Fiddle

Note I use forwards for the fill-mode of the animation keeping the last keyframe