CSSだけで要素の拡大縮小アニメーションサンプル

a

b

CSSで実装する要素の拡大縮小アニメーションです
transitionでアニメーション時間を設定して、マウスホバー時にtransform:scale()でサイズを変更しています

HTML

<p class="square A">a</p>
<p class="square B">b</p>

CSS

.square{
  width: 100px;
  height: 100px;
  background: #3399ff;
  transition: 1s;
  -webkit-transition: 1s;
  margin:10px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.A:hover{
  transform: scale(1.5);
}


.B:hover{
  transform: scale(0.1);
}