CSS關鍵幀動畫的Chrome v59.0.3071.109

輕彈隨着最新的Chrome v59.0.3071.109更新我已經意識到，關鍵幀動畫可能輕彈。CSS關鍵幀動畫的Chrome v59.0.3071.109

CSS

.rectangle { 
    display:block; 
    background:#AAA; 
    margin:3em auto; 
    width:30px; 
    height:50px; 
    box-shadow: 
    inset #AAA 0 0 0 0, 
    inset #222 0 0px 0 0; 
    animation:filler 5s linear infinite; 
} 

@keyframes filler{ 
    0%{ 

    box-shadow: 
     inset #AAA 0 0px 0 0, 
     inset #222 0 0px 0 0; 
    } 
    100%{ 
    transform:rotate(360deg); 
    box-shadow: 
     inset #AAA 0 0px 0 0, 
     inset #222 0 50px 0 0; 
    } 
}

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta name="description" content="Flick example"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div class="rectangle"></div> 
</body> 
</html>

DEMO（請檢查您的Chrome版本v59.0.3071.109）

https://jsbin.com/nameyi/edit?html,css,output

我已經意識到，如果我刪除了旋轉似乎更好但我想保持旋轉。

有什麼辦法可以避免甩尾？

來源

2017-06-26 kitimenpolku

我用不同的方式來實現相同的結果，沒有閃爍。盒子陰影是一種非常昂貴的操作，經常會導致閃爍。

.rectangle { 
 
    display: block; 
 
    background: #AAA; 
 
    margin: 3em auto; 
 
    width: 30px; 
 
    height: 50px; 
 
    position: relative; 
 
    animation:rotater 5s linear infinite; 
 
} 
 

 
.rectangle:after { 
 
    content: " "; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    height: 0px; 
 
    width: 30px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    animation: filler 5s linear infinite; 
 
} 
 

 
@keyframes filler { 
 
    from { height: 0px; } 
 
    to { height: 50px; } 
 
} 
 

 

 
@keyframes rotater { 
 
    from { transform:rotate(0deg); } 
 
    to { transform:rotate(360deg); } 
 
}

<div class="rectangle"></div>

來源

2017-06-26 10:09:33 Gerard

CSS關鍵幀動畫的Chrome v59.0.3071.109

回答

相關問題