使用CSS3可以在文本中動畫移動和淡入淡出嗎？

我想要做的是將文本的第一位向右滑動，然後淡入隱藏文本..可能嗎？使用CSS3可以在文本中動畫移動和淡入淡出嗎？

仍在測試有兩件事情與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;}

來源

2011-12-20 Jay J.

作爲一般原則，您是否可以在消息中內嵌一些相關的代碼位，以便隨意的讀者可以從您的問題中學到一些東西，而不必上小提琴？ – 2011-12-20 17:05:55

儘管這看起來不錯，但[IE用戶無法看到轉換]（http://caniuse.com/#search=transition）。如果動畫對您很重要，您可能需要使用某種Javascript解決方案。 – Wex 2011-12-20 17:32:08

你靠近。

visible is not a valid value for display
您需要將其中施加: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; 
}

回覆：動畫的display屬性 - Transitions on the display: property。

來源

2011-12-20 16:51:27

+1好答案，很好的抓住'：懸停'位。 – Wex 2011-12-20 17:30:01

使用CSS3可以在文本中動畫移動和淡入淡出嗎？

回答

相關問題