All geek questions in one place

Move HTML element up on hover

I am trying to move the HTML about 10 pixels each time the user hovers over it. I did some research on w3schools, but could not find any information that helped me. Most of their animation examples used keyframes, and I'm sure that is not what I need, because I'm trying to trigger an animation when someone hovers over an element. I could be wrong, and therefore I publish here.

Here is the element I'm trying to move:

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

For my CSS:

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

I'm not sure what I need to add in order to activate the element, examples in w3schools did not help. If anyone could point me in the right direction, I would be extremely grateful. Thanks, stack overflow.

+5
source share
1 answer

You do not need to use keyframes for this simple animation. Just a CSS transition is enough.

Set the transition property in the initial state style rules with a duration.

 #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>
+6
source

Source: https://habr.com/ru/post/1234236/

More articles:


All Articles