css3 移入移出動畫

css:

 /*css3 鼠標移入移出動畫  底部出現陰影層文字敘述*/
        *{margin: 0;padding: 0}
        .div1{width:300px;height: 300px;text-align: center; background: pink;position: relative;float: left;overflow: hidden;} /*設置父元素相對定位，超出父元素溢出部分隱藏*/
        .div2{width:300px;height: 300px;opacity: 0; position: absolute; left: 0; top: 0;transition: 0.5s;-webkit-transition: 0.5s;background-color: rgba(255,255,255,0.8);}/*子元素設置絕對定位（絕對定位於父元素）設置初始left,top,而後設置動畫效果（運行時間），其它樣式自定義設置*/
        .div2{opacity: 1;bottom: -100%;transition: 0.5s;-webkit-transition: 0.5s;top: auto}/*子元素設置在底部-100%的位置，高度自動*/
        .div1:hover .div2{bottom: -160px}/*當鼠標移動在父元素的位置上，子元素從底部-100%的位置變更到負160的位置；設置變更到底部爲0的位置，子元素將覆蓋父元素*/
        .text{font-size: 20px;padding-top: 100px;transition: 0.5s;-webkit-transition: 0.5s;position: absolute; left: 30%; top: 0;}/*同上*/
        .text{bottom: 130px;top: auto}/*同上*/
        .div1:hover .text{bottom: 180px;}/*同上*/

html:

<div class="div1"> 　　　　　　　　　　　　　　　　//父元素 <div class="text">申明註釋</div>
        <div class="div2"> //子元素
            內框1內框1內框1內框1內框1
        </div>
    </div>

效果以下：