利用css3實現jQuery中的slideDown和slideUp效果

最開始想要實現一個菜單從上向下滑出的效果，採用transition: translate 0.5s ease-in;老是以爲彆扭的很，無心間看到小米官網的二級菜單從上向下滑出的效果，頓時以爲這樣就不會使得動畫顯得彆扭，審查元素髮現它並無採用css3動畫，猜到它應該用的是jquery裏的slideDown和slideUp動畫效果。
查看w3cschool上的教程，發現果真如此。頓時靈光一閃，在google裏搜索css3 slideDown，發現真的有大神研究過這個問題。點擊這裏
如下是兩種實現方式：

1. 所有用css實現slideDown和slideUp:DEMO

2. 用css和js實現slideDown和slideUp:DEMO

另外先插入一篇利用原生js檢測css3動畫是否支持的文章，還沒驗證。打算這周有時間的時候弄一弄。地址