Can't flip the navbar menu text vertically using css animation

Question

I'm trying to create navbar menu in which the text flip when hover.

this is the code i tried so far and embedded the video which show the final result that i'm trying to achieve.




    
    
    
    Document
    


    
        
            
                
                    About
                    Project
                    Resume
                
            
        
    
    
        
        
        Video link is given if iframe is note suported by stackoverflow code snippet poster
        Video link

I can't figure out a way to animate the text which go upward when we hover and return to the starting position from the bottom.

user_9256189 · Answer

You need to use ::after and ::before selectors for this. Note that, you need to add data-text attributes to all the links (with the name of link as value).

* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
  text-decoration: none;
  outline: none;
  box-sizing: border-box;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 1100px;
}

header {
  height: 100px;
  padding: 20px 0;
}

header nav {}

header nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

header nav ul li {
  font-size: 23px;
  position: relative;
}

header nav ul li a {
  position: absolute;
  height: 1.3em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header nav ul li a::after {
  content: attr(data-text);
  color: red;
  transition: transform 0.3s;
}

header nav ul li a::before {
  content: attr(data-text);
  color: blue;
  transition: transform 0.3s;
}

header nav ul li a:hover::before {
  transform: translateY(-1.15em);
}

header nav ul li a:hover::after {
  transform: translateY(-1.15em);
}

div.video iframe {
  margin-top: 30px;
}





  
  
  
  Document



  
    
      
        
          
            
          
          
            
          
          
            
          
        
      
    
  
  
    
      
      Video link is given if iframe is note suported by stackoverflow code snpite poster
      Vide link

user_12060241 · Answer

You need to set the duration of the animation operation.

You must use : animation-iteration-count

Or delete infinite :

animation: flip 2s ease;

Enjoy !

Can't flip the navbar menu text vertically using css animation

2 Answers