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

Question

我正在尝试创建一个 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;
    }
}

Answer 1

如何使动画持续时间为 7 秒：

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

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

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

jsfiddle