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

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

---

让动画持续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;
    }
}

---

欢迎来到堆栈溢出。我刚刚删除了你的“提前感谢”，因为这里的惯例是不包括它。欢迎非常感谢你的帮助，效果很好。谢谢。