【CSS】簡単な要素の拡大縮小アニメーションサンプル

2018年2月25日CSSアニメーション, CSS

CSSで要素の拡大縮小アニメーションを実装します

回転させる要素、今回は簡単な正方形をCSSで描きます

.square{
  width: 100px;
  height: 100px;
 background:red;
}

アニメーション時間をtransitionで指定して(0~無限大、1で等倍です)マウスホバー時に実行するあニメーションを設定します

1秒で1.5倍の大きさになる様にしてみたサンプルコード

.square{
  width: 100px;
  height: 100px;
 background:red;
  transition: 1s;
  -webkit-transition: 1s;
}

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

 

1秒で0.1倍の大きさになる様にしてみたサンプルコード

.square{
  width: 100px;
  height: 100px;
 background:red;
  transition: 1s;
  -webkit-transition: 1s;
}

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

 

他の要素を変更したり追加して遊びます

.square{
  width: 100px;
  height: 100px;
 background:red;
  transition: 1s;
  -webkit-transition: 1s;
}

.square:hover{
  background:blue;
  transform: scale(2);
}

 

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

See the Pen Scaling element css Animation by yochans (@yochans) on CodePen.

※こちらではマウスホバーではなくクリック(タップ)時のアクションとしてあります

2018年2月25日CSSアニメーション, CSS

Posted by Yousuke.U