显示css3动画2次

Question

我使用flash CSS3 animate设计bootstrap错误框像这段代码:

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;
    }
}

这工作和工作flash动画但是,我需要显示两次flash动画效果.

怎么创造这个？

DEMO FIDDLE

Answer 1

使用属性动画迭代,该属性以这种方式工作

定义停止前应播放动画循环的次数

在简写中,您可以在替换infinite值的持续时间后添加值:

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

检查你的演示小提琴

注意我forwards用于保留最后一个关键帧的动画的填充模式