【デモ付き】Transformが効かないときに疑うところと解決方法
2分目次
最近 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 で動かない。
僕が使ってたのも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 って奥が深いなぁ。