cssで乗算でなく加算で大きくする方法もしくはその他の方法での拡大アニメーション

調べながら初めてのサイトを作ろうとしている超絶初心者です。
サイトを開いたとき、"3つの黒点が大きいものから順番に、何もない白い背景から現れ、ゆっくりと大きくなる"表現をしたいのですが、画像のコードだと"サイトを開いた瞬間40px*40pxのmiddlecircleが0.2s表示された後、0~40pxまでアニメーションしている"ように見えます。
これを開いた瞬間は真っ白で順に現れるようにするにはどうすれば良いのでしょうか。
widthとheightを0にしてtransform scaleで大きくすればいいのかなと思いましたが、引数に何倍かを指定するらしく、最初を0にするとずっと0のままでうまくいかず、いい方法はないものかと行き詰っています。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4      <meta charset="utf-8">
5    <title></title>
6    <link rel="stylesheet" type="text/css" href="style.css">
7    <link rel="stylesheet" href="responsive.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
9    </head>
10  <body>
11      <div class="largecircle"></div>
12      <div class="middlecircle"></div>
13      <div class="smallcircle"></div>
14      <footer>
15      </footer>
16    <script src="jQuery.js"></script>
17  </body>
18</html>

CSS
1@charset "utf-8";
2.largecircle{
3    width:90px;
4    height:90px;
5    border-radius:50%;
6    background:black;
7    position:fixed;
8    left:1600px;
9    top:530px;
10    transform-origin:50% 50%;
11    animation: larg 2s ease 0s 1 alternate none running;
12}
13    @keyframes larg{
14        0%{
15            transform:scale(0,0);
16            opacity:0;
17        }
18        100%{
19            transform:scale(1,1);
20            opacity:1;
21        }
22    }
23.middlecircle{
24    width:40px;
25    height:40px;
26    border-radius:50%;
27    background:black;
28    position:absolute;
29    left:1500px;
30    top:930px;
31    transform-origin:50% 50%;
32    animation: middl 2s ease 0s 1 alternate none running;
33    animation-delay:0.2s;
34}
35@keyframes middl{
36        0%{
37            transform:scale(0,0);
38            opacity:0;
39        }
40        100%{
41            transform:scale(1,1);
42            opacity:1;
43        }
44    }
45.smallcircle{
46    width:8px;
47    height:8px;
48    border-radius:50%;
49    background:black;
50    position:absolute;
51    left:1700px;
52    top:1230px;
53    transform-origin:50% 50%;
54    animation: smal 2s ease 0s 1 alternate none running;
55    animation-delay:0.4s;
56}
57@keyframes smal{
58        0%{
59            transform:scale(0,0);
60            opacity:0;
61        }
62        100%{
63            transform:scale(1,1);
64            opacity:1;
65        }
66    }

m.ts10806

2019/09/09 06:03

コードは回答者が再現確認したうえで調整して回答するための材料となるので画像ではなくテキストベースで、マークダウンのcode機能にてご提示ください。 https://teratail.com/help#about-markdown また、CSSだけでHTML構造まで見えてくることはあまりないので「コピペで現在の現象が確認できる」ように関連するコードは全て提示してください。

yoshinavi

2019/09/09 07:30

タイトル等にもある、アニメーションで検索されましたか？例）「CSS アニメーション」等

yasunbhg65

2019/09/09 08:15 編集

まさにそのように検索してfadeInなどに使われるopacityというものを知りました。 keyframesは0%が開始時、100%が終了時とあったので、topの後辺りにopacity:0;と書けば”透明な状態から始まり100％のopacity:1;ではっきり見えるようになる”と思ったのですが、実際はアニメーションの最後にtop後のopacity:0;が発動してしまい、透明になってしまいました。追記:このopacityの模索はディレイで表示される0.2s分の黒点を消そうと試みたものです。