[CSS]transitionが効かない原因３選

CSSでアニメーションを追加しようと思った時、transitionが思うように効かずに嫌になってしまう事ってありますよね。今回はありがちなtransitionが効かない時の原因3選と解決方法を紹介します。

前後の値が設定されていない

transitionを効かせるためには変化する前と後の前後の値が必要です。

transitionが使われる代表的な例としては、マウスホバーした時のopacityを思い浮かべる人が多いと思います。

例

.link {
  font-size: 1rem;
  transition: 0.3s;
}
.link:hover {
  opacity: 0.7;
}
//など

いやいや、ホバー前の値設定していないやん！

と思われるかもしれませんが、実はopacityはブラウザがデフォルトで”1”を初期値として持たせています。

なので”1”→”0.7”という変化が表現されるんですね。

初期値の設定がされていない”top”などのプロパティは、変化前と変化後の値を明示的に指定してあげる必要があります。

下記のリンクテキストをマウスホバーしてみてください。ホバー前の値を設定していないのでtransitionが効かないはずです。

See the Pen Untitled by あばたつお (@xyrdlflf-the-encoder) on CodePen.

2つ目の方はやりがちなミスで左端から右端に変化させたい為left→rightとしてしまっています。
leftとrightはそれぞれ別のプロパティなので設定する場合はleft→leftなどのようにしましょう。

.link2 {
  position: absolute;
  top: 50px;
  left: 0;
  transition: 1s;
}
.link2:hover{
  right: 100%;
}

こんな感じですね。

前後の値に100％が設定されている

先程例に挙げたleftなどであればよいのですが、widthやheightの100％はtransitionが効きません。

なぜならそれぞれwidthの100％は親要素に影響されて、heightも100％は親要素や中のコンテンツに影響され動的に設定されるのでtransitionの前後となる起点となる値、目指すべき値が存在しないからです。

同じ理由でautoも効きません。

widthやheightなどのプロパティにtransitionを効かせたい場合はpxやvwなど、その要素が明確に値を持てる単位にしましょう。

ちなみにleftなどの位置を決める値は、100％などであっても基準となる地点から相対的に位置を決めているため、目指すべき値を明確に捉えられる。というわけです。

transitionプロパティを変化後に設定している

下記の例のような状態です。

See the Pen Untitled by あばたつお (@xyrdlflf-the-encoder) on CodePen.

一つ目のリンクテキストですが、ホバーを外すと元に戻るときにtransitionが効いていませんよね。

これはマウスホバーを行ったときに”:hover”が適用され、2秒かけてフォントが大きくなり、ホバーが外されたときに”:hover”が適用されなくなり、元に戻るときにtransitionがなくなるからです。

ちなみにその動きを利用してホバーした時と、ホバーが外された時で別々の動きを設定することも可能です。

上記例の二つ目に記述されているのがそのようになっています。

まとめ

いかがでしたでしょうか。

transitionは上記にあげた原因以外にもOSのバージョンによってもうまく効かないことがあります。
その時はtransitionが効くプロパティでうまく代替したりして大変なんですが。。。

現在の最新バージョンなら大体どのブラウザでも効くと思いますのでhappyなtransitionライフを過ごせるとよいですね。