关于文字下方线消失的动画

<style>    .overlay-figure {        position: relative;        display: table;    }    .overlay-figure    .separator {        display: block;        height: 3px;/*线的高度*/        width:100%;/*线的宽度*/        background-color: #000000;        -webkit-transform: scaleX(0) translateZ(0);        -moz-transform: scaleX(0) translateZ(0);        transform: scaleX(0) translateZ(0);        -webkit-transition: -webkit-transform 0.25s ease 0.25s;        -moz-transition: -moz-transform 0.25s ease 0.25s;        transition: transform 0.25s ease 0.25s;

    }    .top1 a{        font-family: 微软雅黑;        color:#fff;        font-size:14px;    }    .overlay-figure:hover    .separator {        -webkit-transform: scaleX(1) translateZ(0);        -moz-transform: scaleX(1) translateZ(0);        transform: scaleX(1) translateZ(0);    }</style>

<meta charset="utf-8"/><!--三个按钮的动画开始--><div class="overlay-figure" style="display: inline;">    <div class="over_a" style="display: inline;">        <a href="#">了解更多</a>    </div>    <!--<div class="over_a" style="display: inline">-->    <!--观看视频-->    <!--</div>-->    <div class="separator" style="display: inline-block;position: absolute;top:22px"></div></div><!--三个按钮的动画结束-->