如何消除scale3D中的毛刺？

我有問題scale3D。所以，當這些動畫移動。動畫有一個小故障。或像閃光燈一樣。什麼可以消除？這是因爲瀏覽器問題？或者確實如此？如何消除scale3D中的毛刺？

這是我的代碼：

.sk-cube-grid { 
 
    width: 40px; 
 
    height: 40px; 
 
    margin: 100px auto; 
 
} 
 

 
.sk-cube-grid .sk-cube { 
 
    width: 33%; 
 
    height: 33%; 
 
    background-color: #333; 
 
    float: left; 
 
    -webkit-animation: sk-cubeGridScaleDelay 2.3s infinite ease-in-out; 
 
} 
 
.sk-cube-grid .sk-cube1 { 
 
    -webkit-animation-delay: 0.2s; } 
 
.sk-cube-grid .sk-cube2 { 
 
    -webkit-animation-delay: 0.3s; } 
 
.sk-cube-grid .sk-cube3 { 
 
    -webkit-animation-delay: 0.4s;} 
 
.sk-cube-grid .sk-cube4 { 
 
    -webkit-animation-delay: 0.1s; } 
 
.sk-cube-grid .sk-cube5 { 
 
    -webkit-animation-delay: 0.2s; } 
 
.sk-cube-grid .sk-cube6 { 
 
    -webkit-animation-delay: 0.3s; } 
 
.sk-cube-grid .sk-cube7 { 
 
    -webkit-animation-delay: 0s;} 
 
.sk-cube-grid .sk-cube8 { 
 
    -webkit-animation-delay: 0.1s; } 
 
.sk-cube-grid .sk-cube9 { 
 
    -webkit-animation-delay: 0.2s; } 
 

 
@-webkit-keyframes sk-cubeGridScaleDelay { 
 
    0%, 70%, 100% { 
 
    -webkit-transform: scale3D(1, 1, 1); 
 
      transform: scale3D(1, 1, 1); 
 
    } 35% { 
 
    -webkit-transform: scale3D(0, 0, 1); 
 
      transform: scale3D(0, 0, 1); 
 
    } 
 
}

<div class="sk-cube-grid"> 
 
    <div class="sk-cube sk-cube1"></div> 
 
    <div class="sk-cube sk-cube2"></div> 
 
    <div class="sk-cube sk-cube3"></div> 
 
    <div class="sk-cube sk-cube4"></div> 
 
    <div class="sk-cube sk-cube5"></div> 
 
    <div class="sk-cube sk-cube6"></div> 
 
    <div class="sk-cube sk-cube7"></div> 
 
    <div class="sk-cube sk-cube8"></div> 
 
    <div class="sk-cube sk-cube9"></div> 
 
</div>

來源

2017-01-05 test

在Chrome MacOS的看起來不錯。需要更多信息。 –

這樣做完全由着你寬鬆函數來完成。

夫婦筆記：

你不需要scale3D這裏。沒有z軸縮放發生。
請注意，任何彎曲的應用於達到0的元素的寬鬆運行存在陷入負面區域的風險。

就是這樣，使用一個linear緩動消除了這個問題。如果你想曲線動畫的時間，我建議看看立方貝塞爾函數。

.sk-cube-grid { 
 
    width: 40px; 
 
    height: 40px; 
 
    margin: 100px auto; 
 
} 
 

 
.sk-cube-grid .sk-cube { 
 
    width: 33%; 
 
    height: 33%; 
 
    background-color: #333; 
 
    float: left; 
 
    -webkit-animation: sk-cubeGridScaleDelay 2.3s infinite linear; 
 
} 
 
.sk-cube-grid .sk-cube1 { 
 
    -webkit-animation-delay: 0.2s; } 
 
.sk-cube-grid .sk-cube2 { 
 
    -webkit-animation-delay: 0.3s; } 
 
.sk-cube-grid .sk-cube3 { 
 
    -webkit-animation-delay: 0.4s;} 
 
.sk-cube-grid .sk-cube4 { 
 
    -webkit-animation-delay: 0.1s; } 
 
.sk-cube-grid .sk-cube5 { 
 
    -webkit-animation-delay: 0.2s; } 
 
.sk-cube-grid .sk-cube6 { 
 
    -webkit-animation-delay: 0.3s; } 
 
.sk-cube-grid .sk-cube7 { 
 
    -webkit-animation-delay: 0s;} 
 
.sk-cube-grid .sk-cube8 { 
 
    -webkit-animation-delay: 0.1s; } 
 
.sk-cube-grid .sk-cube9 { 
 
    -webkit-animation-delay: 0.2s; } 
 

 
@-webkit-keyframes sk-cubeGridScaleDelay { 
 
    0%, 70%, 100% { 
 
    -webkit-transform: scale(1, 1); 
 
      transform: scale(1, 1); 
 
    } 35% { 
 
    -webkit-transform: scale(0, 0); 
 
      transform: scale(0, 0); 
 
    } 
 
}

<div class="sk-cube-grid"> 
 
    <div class="sk-cube sk-cube1"></div> 
 
    <div class="sk-cube sk-cube2"></div> 
 
    <div class="sk-cube sk-cube3"></div> 
 
    <div class="sk-cube sk-cube4"></div> 
 
    <div class="sk-cube sk-cube5"></div> 
 
    <div class="sk-cube sk-cube6"></div> 
 
    <div class="sk-cube sk-cube7"></div> 
 
    <div class="sk-cube sk-cube8"></div> 
 
    <div class="sk-cube sk-cube9"></div> 
 
</div>

來源

2017-01-05 16:12:01

WoooW thabnks :) – test

如何消除scale3D中的毛刺？

回答

相關問題