web-dev-qa-db-ja.com

ホバー時にHTML要素を上に移動

ユーザーがマウスをHTMLの上に置くと、HTMLを約10ピクセル上に移動しようとしています。私はw3schoolsについていくつかの調査を行いましたが、私に役立つ情報を見つけることができませんでした。彼らのアニメーションの例のほとんどはキーフレームを使用しており、誰かが要素の上に移動したときにアニメーションをトリガーしようとしているので、それは私が必要とするものではないと確信しています。しかし私は間違っている可能性があり、それが私がここに投稿する理由です。

これが私が動かそうとしている要素です：

<div id="arrow">
  <a href="#"><i class="fa fa-arrow-down fa-2x"></i></a>
</div>

私のCSSの場合：

#arrow {
  padding-top: 310px;
  color: #5C6B7E;
  position: relative;
  /* some kind of animation property here? */
}

#arrow:hover {
  /* new properties once user hovers */
}

要素をアニメーション化するために何を追加する必要があるのか​​わかりません。w3schoolsの例はあまり役に立ちませんでした。誰かが私を正しい方向に向けることができれば、私は非常に感謝します。 Stack Overflowに感謝します。

htmlcsscss-animations
10
user3635683

この単純なアニメーションでは、キーフレームを使用する必要はありません。 CSSの移行だけで十分です。

初期状態スタイルルールのtransitionプロパティを期間で設定します。

#arrow {
  position: relative;
  top: 0;
  transition: top ease 0.5s;
}
#arrow:hover {
  top: -10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="arrow">
  <a href="#"><i class="fa fa-arrow-down fa-2x"></i></a>
</div>
20
Manoj Kumar