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