Icon animation when hovered - html

Question

I wan the arrows on my navbar to produce the animation I've created when I hover the options on top of them,
When my mouse hovers "contact", "register" or "login", the arrows under them should move down indicating that they are dropdown buttons, how can I do this? I already have the code of the animation but I don't know how to sync this code with my buttons, I would appreciate any help. Here's the code:
#arrow1 {
position: absolute;
top: 11%;
left: 83.5%;
transform: translate(-50%, -50%);
width: 15px;
height: 100px;
text-align: center;
line-height: 110px;
color: white;
font-size: 30px;
overflow: hidden;
color: yellow;
}
#arrow1 {
margin: 0;
padding: 0;
animation: animate 1s;
right: 0;
pointer-events: none;
}
#keyframes animate {
50% {
transform: translateX(-8px);
margin-top: -35px;
}
}
#arrow2 {
position: absolute;
top: 11%;
left: 66%;
transform: translate(-50%, -50%);
width: 15px;
height: 100px;
text-align: center;
line-height: 110px;
color: white;
font-size: 30px;
overflow: hidden;
color: yellow;
}
#arro2 {
margin: 0;
padding: 0;
animation: animate 1s;
right: 0;
pointer-events: none;
}
#keyframes animate {
50% {
transform: translateX(-8px);
margin-top: -35px;
}
}
#arrow3 {
position: absolute;
top: 11%;
left: 48.7%;
transform: translate(-50%, -50%);
width: 15px;
height: 100px;
text-align: center;
line-height: 110px;
color: white;
font-size: 30px;
overflow: hidden;
color: yellow;
}
#arrow3 {
margin: 0;
padding: 0;
animation: animate 1s;
right: 0;
pointer-events: none;
}
#keyframes animate {
50% {
transform: translateX(-8px);
margin-top: -35px;
}
}
<ul>
<li id="inicio">INICIO</li>
<li id="contacto">CONTACTO</li>
<li id="registrate">REGISTRATE</li>
<li id="ingresar">INGRESAR</li>
<div class="circle">
<i class="fas fa-angle-down" id="arrow1"></i>
<i class="fas fa-angle-down" id="arrow2"></i>
<i class="fas fa-angle-down" id="arrow3"></i>
</div>
</ul>

Answer 1

Since you have your animation assigned to each arrow ID, that animation is playing on page load.
To have the animation play only when the cursor is hovering over the element, you need to add a :hover pseudo-class to each arrow and add the animation within that block.
#arrow1:hover {
animation: animate 1s;
}
After doing that, you should have something like this:
#container {
width: 100%;
height: 80px;
background: #151515;
}
#container,
.navItem {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
transform: translateZ(0);
}
.navItem {
cursor: pointer;
}
.navItem:hover .arrow {
animation: animate 1s;
}
.navText {
font-family: 'Arial', sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
}
.arrow {
position: absolute;
color: #ffff4c;
bottom: -15px;
}
#keyframes animate {
50% {
transform: translateY(8px);
margin-top: -35px;
}
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="container">
<div class="navItem">
<div class="navText">
Contacto
</div>
<i class="fas fa-angle-down arrow"></i>
</div>
</div>
You may notice that I also edited the HTML and CSS for that example, but the idea is the same. This brings me to my next point, and something that may help you.
Classes
Using ID's is a perfectly acceptable way to write your markup and use CSS to style; however, using id as opposed to class can be cumbersome. Since you have multiple arrows, I would advise using classes as opposed to ID's.
So, all of your arrows would be assigned a class. In my example, I used a simple .arrow class. This is proper CSS styling. ID's are unique and should only be used sparingly, usually only once in a document. Classes are reused.
I should also note that this is purely a syntactical thing. CSS will treat ID's and classes similarly if you require it.
Transitions
You may have also noticed that the animation in my example stops if you hover away from the navItem. This is expected behavior if using a :hover pseudo-class on an element. A workaround is substituting an animation for a transition.
Transitions are an alternate way to apply animated properties to elements. They will animate 'forward' and 'backward' on, say, pseudo-classes like :hover and :focus.
Here's what that example looks like with a transition in place of an animation.
#container {
width: 100%;
height: 80px;
background: #151515;
}
#container,
.navItem {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
transform: translateZ(0);
}
.navItem {
cursor: pointer;
}
.navItem:hover .arrow {
transform: translateY(8px);
}
.navText {
font-family: 'Arial', sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
}
.arrow {
position: absolute;
color: #ffff4c;
bottom: -15px;
transition: all 1s;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="container">
<div class="navItem">
<div class="navText">
Contacto
</div>
<i class="fas fa-angle-down arrow"></i>
</div>
</div>
So this gives you a much smoother interaction when hovering over a menu.
Pseudo Elements
Lastly, I want to touch up on using Pseudo Elements for things like icons. They're useful for adding additional children to a parent element, without affecting your written markup.
We can replace the arrows with a pseudo-element to clean up our HTML, as well as creating a more manageable workspace. Here's that example, again, but using a pseudo-element in place of HTML for the arrow.
#container {
width: 100%;
height: 80px;
background: #151515;
}
#container,
.navItem {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
transform: translateZ(0);
}
.navItem {
cursor: pointer;
}
.navItem:hover .navText::after {
transform: translateY(8px);
}
.navText {
font-family: 'Arial', sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.navText::after {
content: "\f107";
font-family: 'FontAwesome';
color: #FFFF00;
position: absolute;
transition: all 1s;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div id="container">
<div class="navItem">
<div class="navText">
Contacto
</div>
</div>
</div>
Conclusion
Should you have any further questions, I'd be happy to answer them and go more in depth.
I also leave you with this final example via Codepen:
https://codepen.io/jeffheral/pen/NYKbZq
The HTML tags may not be what you want, but feel free to change them. The important thing is we have a solid setup of ID's and classes. If you want to add more navigation items, you only need to add more HTML to your document.

Answer 2

Instead of targetting every arrow individually, you can use a more generic solution:
.menu {
display: flex;
list-style: none;
background-color: #444;
}
.menu li {
padding: 10px 15px;
cursor: pointer;
padding-bottom: 20px;
position: relative;
margin: 5px;
color: white;
font-weight: bold;
font-family: sans-serif;
}
.menu li:after {
font-family: FontAwesome;
font-size: 20px;
font-weight: bold;
content: '\f107';
display: inline-block;
color: yellow;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
transition: transform 0.3s ease;
}
.menu li:hover {
background-color: rgba(0, 0, 0, 0.25);
}
.menu li:hover:after {
transform: translate(-50%, 5px);
}
<ul class="menu">
<li>INICIO</li>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>