CSS 过渡：大 div 在动画时完全消失

Question

我在 CSS 过渡效果方面遇到了一些问题。我不明白为什么，但它不起作用。这是一个不起作用的演示：

https://codyhouse.co/demo/ink-transition-effect/index.html

这是一篇关于如何实现此效果的文章（之前，当它起作用时）：

https://codyhouse.co/gem/ink-transition-effect

我正在调试的代码是这个：

HTML 文件:

<body>
  CSS ANIMATIONS TEST
  <div class='cd-transition-layer'>
    <div class="bg-layer"></div>
  </div>
</body>

CSS 文件：

.cd-transition-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    height: 100%;
    width: 100%;
}

.cd-transition-layer .bg-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 15;
    transform: translateY(-50%) translateX(-2%);
    height: 100%;
    width: 2500%;
    background: url('https://i.imgur.com/9uDdPAP.png') no-repeat 0 0;
    background-size: 100% 100%;
    animation: cd-sprite 5s steps(24);
    animation-fill-mode: forwards
}

.cd-transition-layer.opening .bg-layer {
    z-index: 15;
    animation: cd-sprite .8s steps(24);
    animation-fill-mode: forwards
}

@keyframes cd-sprite {
    0% {
        transform: translateY(-50%) translateX(-2%)
    }

    100% {
        transform: translateY(-50%) translateX(-98%)
    }
}

你能帮我找出问题所在吗？

谢谢！

编辑：好的，很奇怪：似乎 div 在重新出现之前在动画期间完全消失了。如果我一直关注检查器中的 div，它就会留在那里。是不是太长了（2500%宽度）？

Answer 1

移动大 divs

在基于 webkit 的浏览器中，在屏幕上快速动画显示大 div 似乎会导致 render/flicker。

如果我不得不猜测，这可能是由于性能原因，浏览器切断了不在视口中的东西。当移动到下一帧时，它没有准备好渲染的像素，导致闪烁。
当您从动画中删除 steps(24) 时，它会变得更加明显。
div 将滑过屏幕，并在某个时候停止显示。

改用背景位置

制作动画时，我们也可以选择只移动背景，而不是在屏幕上移动 div。

  background: url("https://i.imgur.com/9uDdPAP.png") no-repeat;
  background-size: 2500% 100%;  /* Size is needed to stretch 1 frame to fit the div */
  background-position: 0% 0%; /* we can start from frame 0 */
 animation: cd-sprite 1s steps(24);

/* the animation is the same, we only move the background instead. (in 24 steps) */
@keyframes cd-sprite {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

* {
  box-sizing: border-box;
}

.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  height: 100%;
  width: 100%;
}

.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 15;
  height: 100%;
  width: 100%;
  background: url("https://i.imgur.com/9uDdPAP.png") no-repeat;
  background-size: 2500% 100%;
  background-position: 4.16% 0%;
  transform: translateY(-50%) translateX(-50%);
  animation: cd-sprite 1s steps(24) infinite;
  animation-direction: alternate;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  border: 36px solid red;
}

@keyframes cd-sprite {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

<body>
  <div class='cd-transition-layer'>
    <div class="bg-layer"></div>
  </div>
</body>

CSS 过渡：大 div 在动画时完全消失

CSS Transition : large div disappears completely while animating

css

animation

css-animations

移动大 divs

改用背景位置