Question

使用最新的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

我已经意识到如果我删除了旋转它似乎更好但我想保持旋转。

有没有办法避免轻弹？

Answer 1

我用不同的方法来实现相同的结果，没有闪烁。盒子阴影是一种非常昂贵的操作，它经常导致闪烁。

.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>

使用Chrome v59.0.3071.109轻弹CSS关键帧动画

1 个答案: