css - 从屏幕左上角展开圆形动画

Question

我正在尝试从屏幕左上角到整个屏幕制作一个扩大的圆形动画。

我让它按预期工作，但来自页面中心：

@keyframes anim {
 0% { clip-path: circle(0% at 50% 50%); }
 100% { clip-path: circle(150%); }
}

#backdrop {
  background-color: #1B1B1B;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  z-index: 10;
  animation-name: anim;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

<div id="backdrop"></div>

标签： csscss-animationscss-transitions

Answer 1

请如下更改您的关键帧。您正在从50% 50%页面中心开始您的圈子。

0% {
clip-path: circle(0% at 0% 0%);
}