Is it possible to animate moving and fading in text with CSS3?

Question

What I'm trying to do is slide the first bit of text to the right and then fade in the hidden text.. possible?

Still testing a couple things with CSS3 and was wondering if this was possible: http://jsfiddle.net/ht65k/

HTML

<ul id="socialnetworks">
    <li>
        <span><a  href="#">Fade in Text</a></span>
        <a href="#">Slide to Right</a>
    </li>
</ul>

CSS

#socialnetworks li{
    /*border-bottom: 1px #ddd solid;
    padding-bottom: 5px;
    margin-bottom: 5px;*/
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    }

#socialnetworks li:hover{ padding-left: 120px; }
#socialnetworks span{ display: none; }
#socialnetworks span:hover{ display: visible;}

As a general principle, can you include a little of the relevant code bits inline in your message so casual readers can learn a little from your question without going to your fiddle? — Chris Farmer, Dec 20 '11 at 17:05
As nice as this looks, [IE users won't get to see the transitions](http://caniuse.com/#search=transition). You may want to use some sort of Javascript solution if the animation is that important to you. — Wex, Dec 20 '11 at 17:32

score 1 · Answer 1 · edited May 23 '17 at 11:48

You're close.

visible is not a valid value for display
You need to move where the :hover pseudo-class is applied, since you cannot hover over a hidden element.

Demo: http://jsfiddle.net/mattball/r5Hcu. It's not animated, but you should be able to figure out the rest.

Amended CSS

#socialnetworks li {
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

#socialnetworks li:hover {
    padding-left: 120px;
}

#socialnetworks span {
    display: none;
}

#socialnetworks:hover span {
    display: inline;
}

Re: animating the display property — Transitions on the display: property.

Is it possible to animate moving and fading in text with CSS3?

1 Answers1