@Kei05posted at 2022-09-04

transitionの継承について

Q&A

Closed

カラーテーマの切り替えを滑らかにするために、bodyに対して以下のようにtransitionを設定しています。

body {
  transition:
    color .3,
    background-color .3;
}

ただ、コンテンツ内でホバーしたら文字の色を変えるときにtransitionを設定すると、カラーテーマを切り替えたときに以下で指定した文字だけtransitionが遅くなってしまいます。

.title {
  transition: color .3;
}

なにか解決方法はありますか？

2Answer

実際に動かしてみたのですが、親要素のtransitionの設定は子要素には反映されないようですので他に原因がありそうです。

See the Pen Untitled by yotty (@yotty) on CodePen.

文字の色の変化が遅くなっているということですが、デベロッパツールでその要素に適用されているスタイルから、ほかに「transition-duration」が変更されるような記述がないか確認すると解決できるかもしれません。

1Like

This answer has been deleted for violation of our Terms of Service.