html - 跨度之间的CSS转换问题

我正在尝试在按钮HERE中更改文本。颜色的过渡效果很好，但跨度位置的过渡效果不佳。

这是我的代码：

<style>
#btnIniciarFacturacion{
    width: 200px;
    height: 30px;
}

#btnIniciarFacturacion {
   position: relative;
    -webkit-transition:  2s;
    transition: 2s;
    overflow: hidden;

}
.btnIniciarFacturacion-content {
    position: absolute;
    left:0;
    top:0;
    font-size: 20px;
    font-weight: bolder;
}

#btnIniciarFacturacion:hover{
    background-color: orange;
}
#btnIniciarFacturacion .btnIniciarFacturacion-top{
    top:0;
}
#btnIniciarFacturacion:hover .btnIniciarFacturacion-top{
    top:-50px;
}
#btnIniciarFacturacion .btnIniciarFacturacion-bottom {
    top:50px;
}
#btnIniciarFacturacion:hover .btnIniciarFacturacion-bottom {
    top:0px;
}
</style>
<button class="" id="btnIniciarFacturacion">
  <span class="btnIniciarFacturacion-top btnIniciarFacturacion-content" id="spanTotalFacturado"> TOTAL !@#</span>
  <span class="btnIniciarFacturacion-bottom btnIniciarFacturacion-content">Iniciar Facturación</span>
 </button>

最佳答案

您在span元素上缺少过渡样式：

.btnIniciarFacturacion-content {
    position: absolute;
    left:0;
    top:0;
    font-size: 20px;
    font-weight: bolder;
    transition: 2s;
}