css hoverで円を中心から広げたい

Question

円の中心から広がるようにCSSを描く方法として
過去の記事を見つけることができました。
transformを使用してできるようですが、hover時にこれを実行したいのですが
うまく動作させることができません。
transitionを使って widthとheightを0pxからhover時に.circle_1をそれぞれ20pxにするような
やり方はできたのですが、中心からは広がらず、左上から広がることがわかりました。

●やりたいことは以下の通りなのですが、問題点と解決方法についてアドバイスを頂けますでしょうか。
宜しくお願い申し上げます。

1. .li_1にhoverした時に
2. .circle_1が中心からwidthとheightそれぞれ20pxずつ広がるようにしたい

<ul>
<li class="li_1"><div class="circle_1"></div>hoge</li><li>fuga</li>
</ul>

ul li{
  display:inline;
}

li{
  width:20px;
  height:20px;
  background:#ffffff;
  border-left: 1px solid #000000;
  padding:10px;
}

.circle_1{
  position:absolute;
  left:70px;
  width:20px;
  height:20px;
  /* transition:all 1s ease; */
  transform:50% 50%;
  background:gray;
  border-radius:50%;
}

.li_1:hover .circle_1{
@keyframes big{
  0%{
    transform: scale(0);
  }
 100%{
    transform: scale(1);
  }
}
}

Answer 1

簡易的に1.2にしております。
（数値px指定できたかは覚えていないのでお調べいただくのが一番かと思います。。）

.li_1:hover .circle_1:hover{
  -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -o-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);
  }
}

Comments

[SugiuraY]

コメントありがとうございます。
transform: scale()を使ったことがなかったのですが、初めてしりました。
初めにwidthとheightを0にして円を出現させる場合、倍率の1.2では表現できないのではとおもったのですが、これもopacityとの組み合わせで対応できそうです。

Answer 2

@keyframesの使い方が理解できていないようですので
こちらをご参照ください。
こちらを読んで理解すれば実装できます。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Comments

[SugiuraY]

コメントありがとうございます。以下のCSSで実行することができました！
animationの各プロパティを設定することを失念しておりました。。。
また、hoverするまでは見せたくたいのでopacityを設定することにしました。
ul li{
display:inline;
}

li{
width:20px;
height:20px;
background:#ffffff;
border-left: 1px solid #000000;
padding:10px;
}

.circle_1{
position:absolute;
left:70px;
width:20px;
height:20px;
opacity:0;
/* transition:all 1s ease; */
background:gray;
border-radius:50%;
}

.li_1:hover .circle_1{
animation-name: big;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes big{
0%{
transform: scale(0);
opacity:0;
}
1%{
opacity:1;
}
100%{
transform: scale(1);
opacity:1;
}
}

お力添え有難うございます。