有没有办法让 CSS3 动画停止然后在 5 秒后重新开始？答案

【问题标题】：Is there a way to make a CSS3 animation stop and then start again after 5 seconds?有没有办法让 CSS3 动画停止然后在 5 秒后重新开始？
【发布时间】：2013-05-14 02:33:34
【问题描述】：

我正在尝试创建一个 CSS3 动画，该动画将在页面加载后开始。我正在寻找动画停止而不是立即重复。我希望动画在 5 秒后重新开始。有没有一种简单的方法可以做到这一点？

这是我目前为止一直重复动画的代码。我希望动画在 5 秒后首次加载后重复。

h1 {
    font-family: 'BebasRegular', sans-serif;
    font-size: 150px;
    padding-bottom: 100px;
    padding-top: 50px;
    background: #E9AB17 -webkit-gradient(linear, left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 155px;
    color: rgba(255, 255, 255, 0.1);
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;    
}
@-webkit-keyframes shine {
    0% {
        background-position: top left;
    }
    100% {
        background-position: top right;
    }
}

【问题讨论】：

欢迎来到 Stack Overflow。我刚刚删除了您的“提前致谢”，因为这里通常不包含它。欢迎！

标签： css css-animations

【解决方案1】：

让动画时长7s怎么样：

-webkit-animation-name: shine;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;

并在2s左右添加一个关键帧，与最后一个相同：

@-webkit-keyframes shine {
    0%  {
        background-position: top left;
    }
    28%, 100% {
        background-position: top right;
    }
}

jsfiddle

【讨论】：

非常感谢您的帮助，效果很好。欣赏它。