css - 每 3 秒重播一次动画 CSS3

Question

我制作了一个 css3 动画，但需要每 3 秒无限运行一次，仅使用 css 无法做到。

CSS3

.halo-robford-animate{
    animation: leaves 0.3s ease-in-out 3 alternate;
    -webkit-animation: leaves 0.3s ease-in-out 3 alternate;
}

Codepen

Answer 1

您缺少 animation-iteration-count。 动画的正式语法是:

animation: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>

Source + additional info

您可以将其更改为:

.halo-robford-animate{
    animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
     -moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
    -o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}

注意 3 的测量需要一个单位，因此添加了一个 s 使其成为 3s。第二次测量是 animation-delay，它指定了开始的延迟，而不是动画之间的延迟。

Demo

或者单独使用属性:

animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;

如果您希望动画之间有 3 秒的间隔，而动画需要 0.3 秒，则需要稍作调整。将 animation-duration 更改为 3s(这是您拥有的 0.3s)

.halo-robford-animate{
    animation: leaves 3s ease-in-out 3s infinite alternate;
    -webkit-animation: leaves 3s ease-in-out 3s infinite alternate;
     -moz-animation: leaves 3s ease-in-out 3s infinite alternate;
    -o-animation: leaves 3s ease-in-out 3s infinite alternate;
}

让动画只在前 0.3 秒发生:

@-webkit-keyframes leaves {
    0% {
        opacity: 1;
    }

    5% {
      opacity: 0.5;
    }

    10% {
        opacity: 1;
    }
}

Demo 2