CSS Transitions on span tags

[sbassett]

So I like to create an effect to show the full link text on hover/focus. I would like a slight transition to show the hidden spans in the anchor element. I have looked at a few good other examples on this site and elsewhere, but I am stuck on what I am doing wrong on this effect. Any help would be greatly appreciated!

[CSS-Transitions Simple Example.](http://cdpn.io/Gvitc “CodePen – CSS Transitions on Span Tags – Why doesn’t it work?”)

[Paulie_D]

You can’t transition from one position ‘type’ to another as they are either ‘on’ or ‘off’.

Here’s an option: http://codepen.io/Paulie-D/pen/BCtxj

[sbassett]

Thanks @Paulie_D you’re awesome!

[Paulie_D]

You should be aware that because we’re using a transition instead of an animation the link will START at the default font-size and then scale down to 0 when the page is loaded.

You can see this by refreshing the Codepen page.

[Author]

Posts