1
轻弹随着最新的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
我已经意识到,如果我删除了旋转似乎更好但我想保持旋转。
有什么办法可以避免甩尾?