显示css3动画2次

Question

我使用flash CSS3动画设计了引导错误框，如下所示：

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

这工作和工作闪光灯动画，但，我需要显示两次闪光灯动画效果。

这是如何创造的？

演示小提琴

Answer 1

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

定义动画周期在停止之前应播放的次数。

在速记中，可以在替换infinite值的持续时间之后添加值：

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

检查您的演示Fiddle

注意，我使用forwards作为动画的https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode，保持最后一个关键帧。

Answer 2

将flash linear 1s infinite更改为flash linear 1s 2。

第四个论点是重复计数。和动画-迭代计数一样。