CODEWITHSUNDEEP
jquerycsscss-transitionstransition
kristjan reinhold
kristjan reinhold

Reputation: 2048

CSS: Animating text from left to right on hover [fiddle provided]

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.

enter image description here

Hovering an element reveals text for the icon

enter image description here

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/

Upvotes: 0

Views: 5843

Answers (3)

Mattia Nocerino
Mattia Nocerino

Reputation: 1513

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;   
}

Upvotes: 3

Simon M.
Simon M.

Reputation: 2482

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

Upvotes: 2

asif308
asif308

Reputation: 90

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;          
}

Upvotes: 0

Related Questions