背景渐变:覆盖不起作用

Question

我对CSS3动画很陌生，所以这对我来说很难。我试图在我的网站的顶部栏上创建一种反射效果，让用户意识到这个栏。

所以我实际上想要一个反射从栏的左边快速移动到右边

但是我有两个问题……1)。我不知道为什么这个想法不能与background-size:cover;或background-size:100% 100%一起工作?当我指定像素宽度时，它确实工作，但是我只想让它总是100%，因为条本身总是100%宽。

2)。我不知道怎么才能让它暂停3秒。因此，反射效果应该在页面加载时开始，然后暂停3秒，然后重复。

这可能吗?

<div class="masked">
    <span class="inner">
    This is some Text
    </span>
</div>
background: linear-gradient(-45deg,  rgba(85,85,85,1) 0%,rgba(85,85,85,1) 48%,rgba(255,255,255,1) 50%,rgba(85,85,85,1) 52%,rgba(85,85,85,1) 100%);
    background-size:1500px 20px;
    animation-name: masked-animation;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;

http://jsfiddle.net/7Akwf/

谁能帮我一下吗?

Answer 1

要让动画暂停3秒并继续，您必须首先设置animation-iteration-count: infinite;，然后使用@keyframes定义通过使用百分比作为暂停来控制延迟。

在下面的演示中，我使用0%-50%作为完整的动画。然后我使用%50-%100作为暂停。

如果你想使用background-size: 100% 100%;，你需要设置你的background-position: -2000px 0;，所以它完全离开屏幕的左侧，如果你想让你的动画滚动。你还需要调整你的@keyframes，使它在完成后完全从右侧滚动。由于这个额外的距离，你需要相应地调整你的持续时间来获得你想要的效果。

演示:http://jsfiddle.net/ThinkingStiff/jaRW3/

@keyframes masked-animation {
    0% {background-position: -2000px 0;}
    50% {background-position: 2000px 0;}
    100% {background-position: 2000px 0;}
}

这里我使用6s持续时间，其中50%将是暂停，%50将是动画，或各3秒。它在开始前也等待3秒。这使用了速记语法，节省了大量的空间。

animation: masked-animation 6s ease-in-out 3s infinite;
background-position: -2000px 0;
background-repeat: no-repeat;
background-size: 100% 100%;