【デモ付き】Transformが効かないときに疑うところと解決方法

2

目次

最近 BASE での EC サイト制作案件があり、独自タグにウンウン唸りながら大体形になった。その中で数量を選ぶと価格をアニメーションで変化させる仕様を採用したのだが、scale のアニメーションが上手く動作しなくて軽く詰まった。

簡略化してるが該当コードはざっくり下記の通り。

ざっとこんな感じ
.bigger {
  animation: bigger 0.3s ease;
}

@keyframes bigger {
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: none;
  }
}

inputの数量が変わったタイミングで価格部分にbiggerクラス付与といった具合。

原因

transformscaleの仕様を確認すればすぐにわかるがインラインレベル要素は transform が効かない。

A transformable element is an element in one of these categories: all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],

transform の効く要素は下記の通り

  • inline、table-column、table-column-group 以外の display を持つ要素

初期値がインラインレベルでよく見かけるタグはaabbrbcitecodeemiimginputkbdlabelqselectsmallspanstrongtextarea、あたりだろうか。こいつらは transform で動かない

僕が使ってたのもspanだった

解決策

単純にdisplay: inline-block;などで inline 要素から inline-block 要素に変えてやればいい。

ざっとこんな感じ
.bigger {
  animation: bigger 0.3s ease;
  display: inline-block; /* ADD */
}

@keyframes bigger {
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: none;
  }
}

デモ

原因から解決まで、これを見てもらえれば分かる通りだ。ちなみにこのデモを作ってるとき、grid で軽くレイアウトだけ整えようと思ったら grid の子要素(grid item)は transform が効くことが判明した。

最下部のCHANGE LAYOUTを押すと親要素に grid が適用されるので試してみてください

CSS って奥が深いなぁ。

  • SNSでシェアしよう
  • Twitterでシェア
  • FaceBookでシェア
  • Lineでシェア
  • 記事タイトルとURLをコピー
トップへ戻るボタン

\ HOME /

トップへ戻る