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

目次

• 原因
• 解決策
• デモ

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

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

.bigger {
  animation: bigger 0.3s ease;
}

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

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

原因

transformのscaleの仕様を確認すればすぐにわかるがインラインレベル要素は 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 を持つ要素

初期値がインラインレベルでよく見かけるタグはa、abbr、b、cite、code、em、i、img、input、kbd、label、q、select、small、span、strong、textarea、あたりだろうか。こいつらは transform で動かない。

解決策

単純に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 が効くことが判明した。

CSS って奥が深いなぁ。