こんにちは、yutaです。
CSSでtransitionを使おうとしていたんですが、safariでは上手く動くのに、chromeでは機能しないという問題が起きました。
「transition safari 効かない」みたいなキーワードでググってたんですが、なかなか該当する記事が出てこなくてしばらく悩んだのでメモしておきます。
chromeでtransitionが効かないのは省略した書き方をしているから
僕の場合は、これでした。とはいえショートハンドを使ってはいけないと言うことではありません。以下は正常に動作します。
transition: font-size 0.3s ease-in 0s;フォントサイズを0.3秒かけて、ease-inと言う変化の仕方で、待った無し(ディレイ0秒)で遷移(transition)させるということですね。
僕が間違っていたのは、0sのsを省略していたと言う点です。
これをやると、chromeでは動作しなくなります。(safariは動きますが。)
つまり、僕が以前書いていたコードは以下。
transition: font-size 0.3s ease-in 0;“s”を省略していますね。これはダメです。きちんと、”0s”と記述しましょう。
以上です。では、また！
ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです！(※別タブで開きます)
