跨度之间的css过渡问题

Question

我正在尝试更改按钮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>

Answer 1

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

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