CSS - 無限的動畫（移動到右裝載梯度）閃爍

我在這裏按照本教程：https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html CSS - 無限的動畫（移動到右裝載梯度）閃爍

創建一個虛擬裝載機。不幸的是，本教程包含固定的像素值，我希望它可以在各種尺寸的屏幕上工作。所以我調整這樣的動畫：

@keyframes placeHolderShimmer { 
 
    0% { 
 
    background-position: -30vw 0 
 
    } 
 
    100% { 
 
    background-position: 30vw 0 
 
    } 
 
} 
 

 
.c-animated-background { 
 
    animation-duration: 1.5s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
    animation-name: placeHolderShimmer; 
 
    animation-timing-function: linear; 
 
    background: fff; 
 
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 
 
    height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
    padding-top: 50px; 
 
    -webkit-backface-visibility: hidden 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body class="c-animated-background"> 
 
</body> 
 

 
</html>

不幸的是在動畫結束之後1.5秒，灰色區域跳躍向前或向後，這取決於予設定的關鍵幀背景位置值。我怎樣才能防止這種情況並使轉換順利？此外，動畫效果似乎比我想象的要強烈 - 當我想用我的Macbook 2016在Chrome瀏覽器中查看背景元素時，它會掛起大約15秒。我是否應該使用轉換/轉換動畫代替？

這裏是一個plunker：https://plnkr.co/edit/X8PBIUYmAC11LCUV9uTy?p=preview

來源

2017-10-05 Phil

理想情況下，你會使用'100vw'和'-100vw'。將速度提高到5秒，速度與現在的速度相同。 [例子]（http://jsbin.com/jemigixuco/edit?html,css,output） – misterManSam

謝謝@misterManSam，你的回答最好，但它很簡單。完善！ – Phil

請檢查更新的回答希望對你有幫助。目前我不認爲有必要移動身體。但是你可以在其中定義一個分區，並將其與絕對相關。

當定義爲負值時，VW無法正常工作。請檢查更新的答案

@keyframes placeHolderShimmer { 
 
    0% { 
 
    background-position: 0px 0; 
 
    } 
 
    100% { 
 
    background-position: 100em 0; 
 
    } 
 
} 
 

 
.c-animated-background { 
 
    animation-duration: 3s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
    animation-name: placeHolderShimmer; 
 
    animation-timing-function: linear; 
 
    background: fff; 
 
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    padding-top: 50px; 
 
    -webkit-backface-visibility: hidden; 
 
    left:0; 
 
    right:0; 
 
    top:0; 
 
    bottom:0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
<div class="c-animated-background"> 
 
</div> 
 
</body> 
 

 
</html>

來源

2017-10-05 06:12:39

這可以跳過並不會調整大小。 – misterManSam

嘗試這一段代碼。

我所做的是將關鍵幀值轉換爲從 - 對，因爲您只有2個閾值，並且不需要使用％值。

第二，我根據使用視口單位的視口給出了寬度&高度值。

如果在下面有任何問題的評論。

@keyframes placeHolderShimmer { 
 
    from { 
 
    background-position: -468px 0 
 
    } 
 
    to { 
 
    background-position: 468px 0 
 
    } 
 
} 
 

 
.animated-background { 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
    animation-name: placeHolderShimmer; 
 
    animation-timing-function: linear; 
 
    background: #f6f7f8; 
 
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 
 
    background-size: 800px 104px; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: relative; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="animated-background"></div> 
 
</body> 
 

 
</html>

來源

2017-10-05 06:11:27

這可以跳過並且不會調整大小。 – misterManSam

在1.5秒後，動畫將begon從0這就是爲什麼它的閃爍。

這部作品中的jsfiddle：

0% { 
    background-position: -30vw 0 
} 
100% { 
    background-position: 70vw 0 
}

見JSFiddle，使之更加清晰。這取決於屏幕的寬度。

古德勒克，

的Fabian＃網絡明星

來源

2017-10-05 06:15:31

沒有關於時間的問題。在這裏，你以-30vh開始，所以以70vh（100-30）結束，就像平滑過渡一樣簡單。檢查下面的代碼片段以供參考。

@keyframes placeHolderShimmer { 
 
    0% { 
 
    background-position: -30vw 0 
 
    } 
 
    100% { 
 
    background-position: 70vw 0 
 
    } 
 
} 
 

 
.c-animated-background { 
 
    animation-duration: 1.5s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
    animation-name: placeHolderShimmer; 
 
    animation-timing-function: linear; 
 
    background: fff; 
 
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); 
 
    height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
    padding-top: 50px; 
 
    -webkit-backface-visibility: hidden 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body class="c-animated-background"> 
 
</body> 
 

 
</html>

來源

2017-10-05 06:17:52

CSS - 無限的動畫（移動到右裝載梯度）閃爍

回答

相關問題