web-dev-qa-db-fra.com

Déplacer l'élément HTML vers le haut en survol

J'essaie de déplacer un code HTML d'environ 10 pixels chaque fois qu'un utilisateur passe la souris dessus. J'ai fait des recherches sur w3schools mais je n'ai trouvé aucune information qui m'a aidé. La plupart de leurs exemples d'animation utilisaient des images clés et je suis sûr que ce n'est pas ce dont j'ai besoin parce que j'essaie de déclencher une animation lorsque quelqu'un survole l'élément. Je peux me tromper cependant et c'est pourquoi je poste ici.

Voici l'élément que j'essaie de déplacer:

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

Pour mon CSS:

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

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

Je ne suis pas sûr de ce que je dois ajouter pour faire animer l'élément, les exemples sur w3schools ne m'ont pas beaucoup aidé. Si quelqu'un pouvait m'orienter dans la bonne direction, je serais extrêmement reconnaissant. Merci Stack Overflow.

htmlcsscss-animations
10
user3635683

Vous n'avez pas besoin d'utiliser d'images clés pour cette animation simple. Une simple transition CSS suffit.

Définissez la propriété transition dans les règles de style d'état initial avec la durée.

#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