html - css 动画从 15px 缩放到 2000px 并保持较大尺寸

Question

我是 CSS 动画的新手，不太了解发生了什么。这是我的片段：

.test-container {
  position: relative;
  height: 200px;
  background-color: pink;
}

.test {
  fill: black;
  position: absolute;
  top: 0;
  transform: scale(0.0075);
  animation: scale 2s ease-out;
  animation-iteration-count: 1;
}

@keyframes scale {
  0% {
    transform: scale(0.0075);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

<div class="test-container">
  <svg class="test" height="2000" width="2000">
      <circle cx="1000" cy="1000" r="1000" />
      Sorry, your browser does not support inline SVG.
  </svg>
</div>

由于某种原因，该片段没有正确定位圆圈，但这不是我的问题。我希望动画在 4 秒后开始并增加到最大尺寸，然后保持在该尺寸（而不是回到小尺寸）。另外，如果圆圈将容器绑定，以便它不会像这样在容器上扩展，我希望它：

有谁知道如何实现这一目标？

我还应该指出，我使用的是 SVG，因为当我尝试使用 html 圆圈制作动画时，它失去了它的质量，尽管那是因为我是放大而不是缩小。

---

该片段在我的测试中不起作用。它应该像这样开始：

然后在 4 秒后，我希望它开始变大：

直到达到最大尺寸：

红色边框表示它的“容器”。想象上面和下面都有内容；我不希望圆圈与其他内容项重叠。

我希望这更有意义。

---

更新

有人说这是回答，但事实并非如此。这不仅仅是我需要的前锋状态......

无论如何，我自己解决了这个问题：

https://codepen.io/r3plica/pen/JjKxjPy

标签： htmlcss

Answer 1

为了让动画保持在最后你使用的位置animation-fill-mode: forwards

要让它在 4 秒后启动，请使用animation-delay: 4s

为了阻止扩大的圆圈溢出容器设置`溢出：隐藏;

问题中的代码具有非常大的起始圆，通过缩放完成了很大的减少。我已经反过来改变了这一点，所以你从在 svg 元素中绘制的一个小圆圈开始，然后将其展开，因为这似乎比必须计算缩减比更容易。

您希望圆圈扩大多少以及您想对视口的不同纵横比做什么取决于您，但这里的片段显示了您正在寻找的基础。只需使用参数来获得您想要的确切外观（例如，放大的圆圈相对于粉红色容器的高度和/或宽度有多大）。

.test-container {
  position: relative;
  height: 200px;
  background-color: pink;
  overflow-y:hidden;
}

.test {
  fill: black;
  position: absolute;
  top: 90px;
  left:0;
  animation: scale 2s ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 4s;
}

@keyframes scale {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(15);
    opacity: 1;
  }
}

<div class="test-container">
  <svg class="test" height="20" width="20">
      <circle cx="10" cy="10" r="10" />
      Sorry, your browser does not support inline SVG.
  </svg>
</div>