Sitenin mobil menüsünde 3 tane span var ve bunlar tıklama ile CSS animasyonuyla menü icon'undan kapat icon'una dönüyor. Ortadaki span ekranın dışına çıkıp kayboluyor ama bunu yaparken sayfayı da genişletiyor. Sayfa genişlediği için de yatay kaydırma çubuğu oluşuyor. Aşağıdaki kod ile bunu engelliyorum, bu seferde animasyon düzgün çalışmıyor. Doğru kodlama nasıl olmalı?

Uyguladığım CSS:

.menu-button {
    overflow-x: hidden;
}

İlgili HTML kodları:

<div class="menu-button">
    <span></span>
    <span></span>
    <span></span>
</div>