CSS3背景渐变动画 - 背景大小：封面不工作？

我很新的CSS3动画，所以这对我来说是一个艰难的。我试图在我的网站上的顶栏上创建一种反射效果，以使用户意识到该栏。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;

DEMOhttp://jsfiddle.net/7Akwf/

能有人帮我吗？

来源

2011-12-31 matt

div本质上没有宽度或高度。所以0的100％正好是我正在寻找的0. – Scott 2011-12-31 09:27:14

要让动画暂停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%;

来源

2011-12-31 10:35:46 ThinkingStiff

。谢谢！ – matt 2011-12-31 14:08:01

CSS3背景渐变动画 - 背景大小：封面不工作？

回答

相关问题