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

如何制作动画持续时间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;
    }
}

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

1 个答案:

jsfiddle