【CSS】画像や文字列をズームインするサンプル

2018年5月8日2019年6月12日CSS,CSSアニメーション

CSSで画像や文字列をズームインするアニメーションCSSサンプルです

ズームインするサンプルCSS

See the Pen Zoom in element CSS Animation by yochans (@yochans) on CodePen.

サンプルではマウスホバーアクション時にscaleで要素のサイズを調節しています

HTML

<p class="item"&gt;Zoom In</p>

CSS

.item{
  width:100px;
  margin:50px;
  padding:10px;
  background:#000;
  color:#FFF;
  text-align:center;
  transition: 1s;
}

.item:hover{
  transform: scale(1.4);
}

ズームインするサンプルCSS @keyframes版

キーフレームを利用した場合です

アニメーション完了時に停止するのにanimation-fill-modeプロパティにてforwardsを指定しておきます

See the Pen Zoom in element CSS Animation 2 by yochans (@yochans) on CodePen.

HTML

<p class="item"&gt;Zoom In</p>

CSS

.item{
  width:100px;
  margin:50px;
  padding:10px;
  background:#000;
  color:#FFF;
  text-align:center;
}

.item:hover{
animation: keyName 1s ease-out forwards;
}

@keyframes keyName{
  100% {
transform: scale(1.4);
  }
}