CSS3动画类型是infinite，如何设置每次循环动画的间隔？

Question

我的代码如下，背景图片可以用这个方块代替：

.box a.gov .tit{
    position: absolute;
    width: 96px;
    height: 61px;
    background: url(../img/buiding_title.png) -832px -621px no-repeat;
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    animation: govtit 4s 0s linear infinite;
}
@keyframes govtit{
    0%{
        top: 4%;
        opacity: 0;
    }
    75%{
        top: 7%;
        opacity: 0;
    }
    100%{
        top: 4%;
        opacity: 1;
    }
}

这样写的效果是背景图不停的从下往上移动，同时透明度从0到1，往复变化。
只是这样第二次动画开始和第一次动画结束的时间间隔太短，如何调长呢？
我试过这个问题的方法，效果不好，求大神指点！
https://segmentfault.com/q/10...

Answer 1

参考@CRMIX 的回答，我找到了解决方法，代码如下：

@keyframes govtit{
     0%,100%{
         top: 7%;
         opacity: 0;
     }
     30% {
         top: 4%;
         opacity: 1;
     }
     31% {
        opacity: 0
     }
}

解释一下,最开始是0%，有一个初始位置top为7%，此时透明度为0。从0%到30%的期间，不断上升而且越来越清晰，最终透明度为1。但是到达最高点的时候我要让它快速消失，所以设置了31%，此时的元素的位置还是在top为4%的位置，只是你看不见了。接下来是关键，31%到100%的过程是不断下降，只是透明度一直是0看不见而已，这段动画也就是设置的循环动画的间隔了，用这个代替了。真正需要的动画是0%到31%的区间，后面的纯粹是拖时间罢了。

Answer 2

你的动画效果都没描述清楚呢，往复是怎么往复？往上去透明，往下实体？且无限循环的话 100% 和 0% 应该是同一个点，但你却设计了两个透明度。

先删掉 100% 的样式，将 0% 改成 0%, 100%

如果是往下实体的话，需要在最后补个时间点，比如 87.5% ，设 opacity 为 1，区间你自己看感受。