【CSS】transition が効かない場合の対処法

transitionプロパティについて

transitionはCSSのプロパティが変化するときの、アニメーションの速度を設定ができるCSSプロパティです。(CSSプロパティとは、color: #eeeや、flat: left;など、CSSで適用するスタイルのことです。)

transitionプロパティの設定例

マウスでホバー時に、対象となるブロックが上に動くようなものを想定します。

TEST1
TEST2

アニメーション対象のブロックを作成

まず四角を2つ描画するHTML、CSSを作成します。

HTML

<div>
  <div class="item">TEST1</div>
  <div class="item">TEST2</div>
</div>
<style>
.item { 
 float: left;
 width: 200px;
 height: 200px;
 padding: 10px;
 margin: 10px;
 border: 1px solid #aaa;
}
</style>

CSS

<style>
.item { 
 float: left;
 width: 200px;
 height: 200px;
 padding: 10px;
 margin: 10px;
 border: 1px solid #aaa;
}
</style>
TEST1
TEST2

マウスホバーでの動作を作る

次に、マウスホバーで上に移動するようにCSSを変更します。

CSS

<style>
.item { 
  float: left;
  width: 200px;
  height: 200px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #aaa;
  position: relative; /* Add */
}
.item:hover {
  top:-10px;
}
</style>
TEST1
TEST2

マウスホバー時のCSSプロパティの変化が下記

.item:hover {
  top:-10px;
}

.itemクラスの top プロパティを変更するために、下記プロパティを.item に追加します。

  position: relative;

アニメーションをつける

今回のアニメーションは、transitionプロパティにより動作の時間を設定することで対応します。

CSS

<style>
.item { 
  float: left;
  width: 200px;
  height: 200px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #aaa;
  position: relative; /* Add */
  transition-property: top; /* Add */
  transition-duration: .3s; /* Add */
}
.item:hover {
  top:-10px;
}
</style>
TEST1
TEST2

CSS

下記プロパティで、動作対象のプロパティ、動作の時間を設定します。

  transition-property: top;
  transition-duration: .3s;

transition 各プロパティ

プロパティ説明
transition-duration変化の開始から終了するまでの時間を指定
transition-property変化が適用されるCSSのプロパティを指定
transition-timing-function変化の度合いを指定
transition-delay変化を開始する時間を指定
transition上記4つのプロパティを一括で指定

transitionプロパティが効かない場合

transitionプロパティが効かない場合は、下記の設定が原因である場合があります。

マウスホバーで動きが無い > position 未設定

マウスホバー時に対象となるブロックの動作がしない場合、positionプロパティが未設定の場合があります。

.item クラスに position: relative; を設定します。

transition-durationが効かない > 開始位置のプロパティ設定がない

動作はするが、transition-durationが効かず、設定した時間でアニメーションを行わない場合があります。

上記のCSS例である、.item クラスの transition 対象のプロパティである top が未設定の場合、transition が効きません。transition の初期値プロパティの設定が必要です。

この記事のご感想やコメントはこちら

メールアドレスが公開されることはありません。 が付いている欄は必須項目です