CSS：悬停时从左到右对文本进行动画处理[提供的提琴]

Question

I'm having a problem of animating text from left to right. As far as I'm concerned there's no way out without some hack.

This is my nav on initial load.

Hovering an element reveals text for the icon

It would be awesome to have text from left => right.

Current

CSS

.menu-item { /* hide and position tooltip */
    opacity: 0;
    transition: opacity 0s ease-in 600ms, opacity 600ms;
}

.menu-item-hover:hover .menu-item {
    opacity: 1;
    transition: opacity 0s ease-in 600ms, opacity 600ms;
}

HTML (handlebars)

<div class="menu-item-hover">
     <i class="icon-my-menu my-menu"></i>
         <span>
              <span class="menu-item">
                   {{i18n-t 'General.myMenu'}}
              </span>
         </span>
</div>

Link to fiddle : http://jsfiddle.net/kristjanrei/kLd7obvg/

And the way text should animate

http://jsfiddle.net/gionaf/SNycF/

Answer 1

There we go

http://jsfiddle.net/kLd7obvg/7/

I just used the :after pseudo element, make it absolute, cover it's parent a use a transition for its width

.menu-item { /* hide and position tooltip */
    opacity: 0;
    transition: opacity 0s ease-in 600ms, opacity 600ms;
    position: relative;
}

.menu-item:after{
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transition: width 600ms;
}

.menu-item-hover:hover .menu-item {
    opacity: 1;
    transition: opacity 0s ease-in 600ms, opacity 600ms;
}

.menu-item-hover:hover .menu-item:after{
    width: 0;   
}

Answer 2

To have to text from left to right, just put it as absolute position and change left value

 .menu-item { /* hide and position tooltip */ opacity: 0; left:-50px; position:absolute; top:10px; transition: all 600ms; } .menu-item-hover:hover .menu-item { opacity: 1; position:absolute; top:8px; left:40px; transition: all 600ms; } 

 <div class="menu-item-hover"> icon <span> <span class="menu-item"> my-menu </span> </span> </div> 

FIDDLE

Answer 3

Try this

   <div class="menu-item-hover">
        icon    
    </div>                     

.menu-item-hover:hover:before {              
    opacity: 1;               
    Content:"my-menu";              
    transition: opacity 0s ease-in 600ms, opacity 600ms;          
}