遮罩一个圆圈并用动画移动遮罩

Question

我有一个在 div 中垂直和水平居中的圆形 div。我正在尝试实现一个css动画，它似乎从上到下淡入淡出。

我最初想将高度设为 0 并移动到 50px，但是当它居中时，它开始从中心创建。相反，我想让它定位到初始位置，并从上到下创建它。就像有一个正方形只遮住了圆形而没有其他东西一样，它会向下移动。

#circle {
   width: 80px;
   height: 80px;
   border-radius: 50px;
}

如何添加这个方形蒙版来达到下面的效果？

请注意，背景有渐变，所以我不能直接放置一个正方形并为其分配颜色，因此我认为我需要遮盖它们。

如何实现这个效果？

---

我尝试过的：

@keyframes example {
   from {height: 0}
   to {height: 80px}
}

当圆居中时，它从中间开始扩大。这不是我想要的。这就是为什么我想到了面具

Answer 1

修改后的答案：

我可以通过图像background 和background-position 动画的组合来实现这一点。

如果您将背景设置为 #fff 之类的 CSS 颜色，这将不起作用。它需要是图像或渐变。您还需要将background-repeat 设置为no-repeat

动画只是从 div 显示区域的背景 out 开始，然后将背景向下拉到显示区域中。

请全屏查看示例。

工作 sn-p（jpeg 图像作为对象背景）：

body {
  background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
  margin: 0 auto;
  height: 120vh;
  overflow: hidden;
}

.sun {
  height: 400px;
  width: 400px;
  border-radius: 100vw;
  margin: 5em auto;
  animation-name: sunrise;
  animation-duration: 10s;
  animation-delay: .5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  background: url(https://image.ibb.co/eVdQ3Q/white.jpg);
  background-repeat: no-repeat;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes sunrise {
  from {
  opacity: 1;
    background-position: 0 -700px;
  }
  to {
  opacity: 1;
    background-position: 0 0px;
  }
}

<div class="sun"></div>

工作 sn-p（渐变作为对象背景）：

body {
  background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
  margin: 0 auto;
  height: 120vh;
  overflow: hidden;
}

.sun {
  height: 400px;
  width: 400px;
  border-radius: 100vw;
  margin: 5em auto;
  animation-name: sunrise;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  background: linear-gradient(white,white);
  background-repeat: no-repeat;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes sunrise {
  from {
  opacity: 1;
    background-position: 0 -700px;
  }
  to {
  opacity: 1;
    background-position: 0 0px;
  }
}

<div class="sun"></div>