Is it possible to animate movement and fading in text using CSS3?

Question

What I'm trying to do is copy the first bit of text to the right and then disappear into the hidden text .. maybe?

Still testing a few things with CSS3 and I was wondering if this is 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;} 

Answer 1

You're close

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

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

Modified 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: property animation display - Transitions on the screen: property .