CODEWITHSUNDEEP
csscss-transitions
Jay J.
Jay J.

Reputation: 43

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

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

Upvotes: 4

Views: 3843

Answers (1)

Matt Ball
Matt Ball

Reputation: 359816

You're close.

  1. visible is not a valid value for display
  2. 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.

Upvotes: 1

Related Questions