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

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>

Answer 1

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

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

Answer 2

.full {
    width: 100vw;
    height: 150px;
    background: red;
    animation-name: anim;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}


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

<div class="full"></div>

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

Expand circle animation from top left corner of the screen

css

css-animations

css-transitions