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背景漸變動畫 - 背景大小：封面不工作？

回答

相關問題