【CSS】transitionが効かない原因6つと解決方法
「transitionでゆっくり変化させたいのに一瞬で変わるんだけど!?」
transitionが効かない原因と解決方法を6つ紹介します。
目次
【原因1】:hover側に指定している
マウスを乗せたときはゆっくり動くけど、マウスを離したとき急に動くときは、:hover側にtransitionを指定していることが原因です。
transitionは、:hover側ではなく、元のセレクタ側に指定しましょう。
下記はその例です。マウスを乗せて確認してみてください。
失敗例）:hoverに設定
<style>
.example{
width: 100px;
height: 100px;
background: #79e5f4;
}
.example:hover{
background: #eb8800;
/*コレ*/transition: 0.5s;
}
</style>
<div class="example">transition</div>成功例）元のセレクタに設定
<style>
.example2{
width: 100px;
height: 100px;
background: #79e5f4;
/*コレ*/transition: 0.5s;
}
.example2:hover{
background: #eb8800;
}
</style>
<div class="example2">transition</div>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【原因2】変化させたいCSSの値が数値以外
displayやwidth、heightが効かないときはこちらです。
transitionは変化前と変化後を数値で変化させます。逆に言うと変化前と変化後の両方が数値でなければ変化できません。
つまりnoneやautoなどを指定しているときは効きません。
transitionでアニメーションさせたいCSSは変化前変化後の両方を数値で指定しましょう。
下記はゆっくり消そうとしてdisplay:noneを指定しようとした例です。
失敗例）display:noneを指定
<style>
.example3{
width: 100px;
height: 100px;
background: #79e5f4;
transition: 0.5s;
}
.example3:hover{
/*コレ*/display: none;
}
</style>
<div class="example3">transition</div>成功例）opacity:0を指定
<style>
.example4{
width: 100px;
height: 100px;
background: #79e5f4;
transition: 0.5s;
}
.example4:hover{
/*コレ*/opacity: 0;
}
</style>
<div class="example4">transition</div>先述したようにtransitionは数値でなければ変化しないため「opacity」を変化させることでゆっくり消しています。
下記はwidth:autoにしようとした例です。
失敗例）width:autoを指定
<style>
.example5{
width: 100px;
height: 100px;
background: #79e5f4;
transition: 0.5s;
}
.example5:hover{
/*コレ*/width: auto;
}
</style>
<div class="example5">transition</div>成功例）width:100%を指定
<style>
.example6{
width: 100px;
height: 100px;
background: #79e5f4;
transition: 0.5s;
}
.example6:hover{
/*コレ*/width: 100%;
}
</style>
<div class="example6">transition</div>autoは効きませんが、100%であれば効きます。
変化前がautoや初期値のときも同様に効かないため注意です。
heightはそもそも100%が効かないことがあります。
jQueryで「slideToggle」を使うことをオススメします。
【原因3】単位sがない
transitionの値には時間を指定します。時間には「秒」を表す「s」が必要です。
この「s」がないと効きません。
transitionの値にはsを付けましょう。
失敗例）sがない
<style>
.example7{
width: 100px;
height: 100px;
background: #79e5f4;
/*コレ*/transition: 0.5;
}
.example7:hover{
background: #eb8800;
}
</style>
<div class="example7">transition</div>成功例）sがある
<style>
.example8{
width: 100px;
height: 100px;
background: #79e5f4;
/*コレ*/transition: 0.5s;
}
.example8:hover{
background: #eb8800;
}
</style>
<div class="example8">transition</div>なお、数値と単位の間に空白があると効きません。くっつけましょう。
【原因4】transformと間違えている
transformは要素の大きさや角度、位置を変えるCSSでアニメーション時に使いがちです。
transitionと頭5文字が一緒で間違いやすいです。
transitionを指定したつもりがtransformになっていないか確認しましょう。
失敗例）transformと間違えている
<style>
.example9{
width: 100px;
height: 100px;
background: #79e5f4;
/*コレ*/transform: 0.5s;
}
.example9:hover{
background: #eb8800;
}
</style>
<div class="example9">transition</div>成功例）transitionを指定
<style>
.example8{
width: 100px;
height: 100px;
background: #79e5f4;
/*コレ*/transition: 0.5s;
}
.example8:hover{
background: #eb8800;
}
</style>
<div class="example8">transition</div>【原因5】その他のCSSを間違えている
transition以前に他のCSSやセレクタの問題で思った動きがしていない可能性があります。
transitionのせいで動きがおかしくなることはないため、いったんtransitionをコメントアウトまたは削除して、思った動きになるか確認しましょう。
transitionとセットで使いがちな下記CSSを確認し手間ましょう。
【原因6】:hoverに問題あり
マウスを乗せたとき、思った動きをしないとき、transitionではなく:hoverに問題がある可能性があります。
下記を参考に:hoverに問題がないか確認してみてください。
【まとめ】transitionが効かない原因
- 【原因1】:hover側に指定している
→元のセレクタ側に指定 - 【原因2】変化させたいCSSの値が数値以外
→transitionで動かすCSSは変化前変化後の両方を数値で指定 - 【原因3】単位sがない
→sをつける - 【原因4】transformと間違えている
→transitionに直す - 【原因5】その他のCSSを間違えている
→transitionを外して要確認 - 【原因6】:hoverに問題あり
→:hoverを要確認
以上、ransitionが効かない原因と解決方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
