Animate: Hover: nach

Question

Ich habe folgende CSS-Regel:

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

Grundsätzlich ist der Knopf hat ein fontawesome Symbol als Inhalt und Titel-Attribut. Wenn Sie den Mauszeiger über die Schaltfläche bewegen, wird ein Leerzeichen und dann der Titel zum Inhalt der Schaltfläche hinzugefügt. Siehe this JSFiddle

Nun die Frage, wie würde ich das animieren? Ich möchte, dass die neue Breite der Schaltfläche animiert wird, so dass sie nicht statisch und hässlich erscheint.

Answer 1

bekam ich eine Lösung, die funktioniert, aber vielleicht nicht am besten Art und Weise

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

Hintergrund

Ihr Ansatz zur Verwendung der Anzeigeeigenschaft ist analog sein. Daher gehen Kredite an diese Transitions on the display: property mit meinem kleinen Hack der Schriftgröße auf 0 in dem Anfang :after Zustand

aktualisiert

Selbst sanfteren Übergang zu verringern:

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

Siehe JSFiddle

Answer 2

Es kann so funktionieren, aber für diese Lösung müssen Sie eine feste Breite auf Ihre Schaltfläche setzen.

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/