Возможно ли анимировать перемещение и выцветание в тексте с помощью CSS3?

Question

Что я пытаюсь сделать, это скопировать первый бит текста вправо, а затем исчезнуть в скрытом тексте .. возможно?

Все еще испытывая пару вещей с помощью CSS3 и был интересен, если это было возможно: 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

Вы близки.

1. visible is not a valid value for display
2. Вам нужно двигаться, где применяется :hover псевдо-класса, так как вы не можете наведите курсор мыши на скрытый элемент.

Демонстрация: http://jsfiddle.net/mattball/r5Hcu. Это не анимированный, но вы должны быть в состоянии выяснить остальное.

Измененная 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: оживляющий display свойство - Transitions on the display: property.