投稿日 : 2019年5月21日

【CSS】transitionがchromeで効かない時に確認して欲しいこと

HTML・CSS|プログラミング

こんにちは、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”と記述しましょう。

以上です。では、また!



ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです!(※別タブで開きます)

お問い合わせ

E-mail : yutric9☆gmail.com
☆を@に置き換えて送信してください。
仕事のご依頼や、その他の質問など何でもお気軽にお問い合わせください。

準備中