11

I have the following css rule:

button:hover:after {
    content: ' ' attr(title);
}

Basically the button has a fontawesome icon as content and a title attribute. When you hover over the button, it will add a space and then the title to the button's content. See this JSFiddle

Now the question, how would I animate this? I want the new width of the button to be animated so it doesn't appear this static and ugly.

Lucky
  • 16,787
  • 19
  • 117
  • 151
John Smith
  • 965
  • 1
  • 9
  • 22

2 Answers2

3

I got a solution, which works but might not be best fashion

button:after {
    content:' ' attr(title);
    visibility: hidden;
    opacity:0;
    transition: visibility 0s linear 0.5s, opacity 0.5s linear, font 0.05s linear;
    font-size: 0;
}
button:hover:after {
    content:' ' attr(title);
    visibility: visible;
    opacity:1;
    transition-delay:0s;
    font-size: 13px;
}

See working JSFiddle here

Background

Your approach is analog to using the display property. Therefore credits go to this Transitions on the display: property with my little hack to decrease the font-size to 0 in the initial :after state

Update

Even smoother transition:

button:after {
    content: ' ' attr(title);
    font-size: 0;
    opacity: 0;
    transition: opacity 0.2s 0s ease, font-size 0.2s 0.2s ease;
}

button:hover:after {
    font-size: inherit;
    opacity: 1;
    transition: font-size 0.2s 0s ease, opacity 0.2s 0.2s ease;
}

See JSFiddle

Community
  • 1
  • 1
gco
  • 1,670
  • 7
  • 24
  • 46
  • 1
    setting `transition` on `:hover` is meaningless – haim770 Aug 27 '15 at 06:43
  • You should also add a transition to the button's width, and it will look better :-) – Ronen Cypis Aug 27 '15 at 06:44
  • See this is the problem. I tried animating width and I do want width (not just instant width and then fade in text, that looks weird) but I can not get the width to be animated. I tried chrome and firefox but the width will not be animated.. – John Smith Aug 27 '15 at 06:54
  • got you. and you cannot change the markup to add a span inside the button? – gco Aug 27 '15 at 06:58
  • how about replacing `width 0.5s linear` with `font-size 0.1s linear`? – gco Aug 27 '15 at 07:00
  • Yes I could do so. But the "font-size" gave me the idea of just putting font-size to 0 and on hover back to inherit. It seems like firefox and chrome like this and now it appears like if the font is coming from left bottom but the width is animated (since font size increases) http://jsfiddle.net/da1L118m/ – John Smith Aug 27 '15 at 07:00
  • right. I updated the answer. anyway, I said this might not be best fashion and feels like a hack. Maybe you find a better solution, I'm keen. – gco Aug 27 '15 at 07:03
  • Looks great, can I edit my answer with your adjustments? – gco Aug 27 '15 at 10:05
2

It can work like this, but for this solution, you'll have to put fixed width to your button.

button:hover:after {
    content: ' ' attr(title);
}

button:hover{
    width:70px;
}

button{
    width:20px;
    overflow:hidden;
    white-space:nowrap;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -ms-transition:0.5s;
    -o-transition:0.5s;
    transition:0.5s;
}

http://jsfiddle.net/j3zw1thh/1/

Quentin Kerguélen
  • 46
  • 5
  • I was thinking of this too, but you might not know the size of the button before. It depends on the string. So you would need javascript to calculate it. – gco Aug 27 '15 at 07:05
  • Indeed. This does not fit because I have a lot of buttons with different widths. – John Smith Aug 27 '15 at 07:12