跨度之间的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; 
}