animation - CSS3 背景渐变动画 - background-size :cover not working?

Question

我是 CSS3 动画的新手，所以这对我来说很难。我正在尝试在我网站的顶部栏上创建一种反射效果，让用户注意到该栏。

所以我实际上想要一个反射从栏的左边到右边的漫游，相当快速和缓和。

不过我有两个问题……1.) 我不知道为什么这个 thinkg 不能与 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%;