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

使用属性以这种方式工作的属性animation-iteration

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

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

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

检查 Demo Fiddle

注意我使用forwards作为保留最后一个关键帧的动画的fill-mode

Answer 2

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

第四个参数是重复计数。与animation-iteration-count相同。

显示css3动画2次

2 个答案: