Grow your CSS skills. Land your dream job.

CSS Transitions on span tags

  • # February 22, 2013 at 11:40 am

    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?”)

    # February 22, 2013 at 11:52 am

    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

    # February 22, 2013 at 12:42 pm

    Thanks @Paulie_D you’re awesome!

    # February 22, 2013 at 2:14 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".