React,マウスhoverでの画像拡大

画像にマウスhoverした際の拡大方法

少しつまったのでメモします
CSSフレームワークでchakra uiを使っています

PlayerCardに表示するための画像に、マウスホバーすると拡大する機能をつける

keyframes

まずはkeyframesでCSSを記載
transformで拡大するように設定。始点は１倍のため書かなくてもよい

PlayerCard.tsx

const bigger = keyframes`
  /* from {transform: scale(1.0, 1.0);} */
  to {transform: scale(1.2, 1.2)}
`;

関数化するとこんな感じ

PlayerCard.tsx

const bigger = (scale: number) => keyframes`
  to {transform: scale(${scale})}
`;

const biggerAnimation = `${bigger(1.2)} 0.2s forwards`;

animationを定義

0.2秒で変化し、マウスホバー中はそのままにするためにforwardsをつける

PlayerCard.tsx

 const biggerAnimation = `${bigger} 0.2s forwards`;

Imageに設定

今回タグはchakra uiを使用している

PlayerCard.tsx

<Image
      borderRadius="full" //画像を丸く表示
      boxSize="160px"
      src={imageUrl}
      alt={name}
      m="auto" //margin auto
      _hover={{
          cursor: "pointer",
          opacity: 0.8,
          animation: biggerAnimation
       }}
 />