Looking to enhance a navbar with some interactive effects:
Upon hovering over an item, I want it to disappear and be replaced by the same text in a different color.
After the initial animation, I'm interested in adding another effect like a 360-degree rotation, followed by the original span reappearing.
I've managed to implement the first animation successfully but struggling to customize the post-animation action without affecting the first one.
Check out the JS fiddle for reference:
https://jsfiddle.net/whgeL8kw/
Here's the CSS code snippet:
.nav-item {
padding: 0 15px;
border: 0;
margin-left:-12px;
margin-right:-12px;
}
.nav-item span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.nav-item > a > span {
font-family: Montserrat, serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #fff;
}
.nav-item > a:before,
.nav-item > a:after {
font-family: Montserrat, serif;
font-size: 16px;
line-height: 24px;
color: lightblue;
text-transform: uppercase;
content: '';
position: absolute;
text-align: center;
opacity: 0;
transition: all .2s ease;
}
.nav-item > a:before {
font-family: Montserrat, serif;
font-size: 16px;
font-weight: 700;
line-height: 24px;
content: attr(data-hover);
/* -webkit-transform: translate(0,150%);
-moz-transform: translate(0,150%);
-ms-transform: translate(0,150%);
-o-transform: translate(0,150%);
transform: translateY(150%);*/
}
.nav-oitem > a:after {
opacity: 0;
content: attr(data-hover);
-webkit-transform: translate(0,150%);
-moz-transform: translate(0,150%);
-ms-transform: translate(0,150%);
-o-transform: translate(0,150%);
transfo...