css - 是否可以使用 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;
}

---

回复:为 display 属性设置动画 — Transitions on the display: property .