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

transitionプロパティについて

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

transitionプロパティの設定例

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

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

まず四角を２つ描画する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>

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

次に、マウスホバーで上に移動するように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>

マウスホバー時の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>

CSS

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

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

transition 各プロパティ

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

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

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

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

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

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

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

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

関連記事:

【HTMLメール】HTMLメールの作成方法について-基本編【メルマガ】