css animation scale from 15px to 2000px and stay at the larger size

Question

I am new to CSS animations and not quite understanding what's going on. Here is my snippet:

.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>

For some reason the snippet doesn't position the circle properly, but that isn't my issue. What I would like for the animation to do is to start after 4 seconds and increase to the max size and then stay at that size (instead of going back to the small size). Also, I would like it if the circle would bound the the container so that it doesn't expand over it like this:

Does anyone know how to achieve this?

I should also point out, that i am using an SVG because when I tried animating with a html circle, it lost it's quality, although that was because I was scaling up rather than down.

The snippet doesn't work as it does on my tests. It's supposed to start like this:

Then after 4 seconds I want it to start getting bigger:

Until it gets to it's maximum size:

The red border is to denote its "container". Imagine there is content above and below; I don't want the circle to ever overlap other content items.

I hope that makes more sense.

Update

Someone said this was answered, but it wasn't. It's not just the forwards state I need.....

I solved this issue myself anyway:

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

Hi, I put up an answer which I think covers the starting after 4 seconds and then staying at the big size at the end. However, I don't think I quite understand what you mean by the circle bounding the container - what your code gave me at the end was a huge circle - so only part of it was showing, but not like your picture. Could you expand on what you would like it to look like? — A Haworth, Nov 12 '20 at 18:01
I could not get the snippet to work how I wanted it to, I will put some images up so you can see what I mean — r3plica, Nov 12 '20 at 20:18
Hi, I don't think anyone said it was answered, just that the answer contained some useful info. Glad it was solved, though would be good to know if my edited answer was OK. — A Haworth, Nov 13 '20 at 12:46

A Haworth · Accepted Answer · 2020-11-12T22:54:15.663

To get the animation to stay where it is at the end you use animation-fill-mode: forwards

To get it to start after 4 seconds use animation-delay: 4s

To stop the enlarged circle spilling out of the container set `overflow: hidden;

The code in the question has very large starting circle with a big reduction done through scaling. I have changed this the other way round so you start with a small circle drawn in the svg element and then expand it as that seemed easier than having to calculate reduction ratios.

How much you want the circle to expand and what you want to do about different aspect ratios of your viewport will be up to you, but here's the snippet that shows the basis of what you are looking for. Just play with the parameters to get the exact look you want (e.g. how big the enlarged circle is to be in relation to the height and/or width of the pink container).

.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>

I managed to solve this myself :) – r3plica Nov 13 '20 at 11:11 — r3plica, Nov 13 '20 at 11:11

css animation scale from 15px to 2000px and stay at the larger size

1 Answers1