Ancho de transición CSS de la línea al centro

Estoy aprendiendo acerca de las transiciones de CSS y estoy tratando de hacer que 3 líneas de desplazamiento reduzcan el ancho a sus respectivos puntos centrales. En este momento, la transición de ancho ocurre a la izquierda y no al centro.

Aquí está el violín .

¿Cómo puedo hacer la transición del ancho de cada línea a sus respectivos puntos centrales?

El código:

const div = document.getElementById('lines') div.addEventListener('click', function() { var className = div.getAttribute("class"); if (className != 'open') { div.className = 'open'; } else { div.className = ''; } }) 
 #lines { width: 250px; height: 250px; position: absolute; cursor: pointer; transition: .25s ease-in-out; } #lines span { border: 1px solid black; display: block; position: absolute; height: 15px; width: 200px; background: #d3531a; border-radius: 9px; transition: width .25s ease-in-out; } #lines span:nth-child(1) { top: 0px; } #lines span:nth-child(2) { top: 18px; left: 18px; } #lines span:nth-child(3) { top: 36px; left: 36px; } #lines.open span { width: 16px; } 
 

Use transform: scale() lugar de width y el transform-origin la transform-origin será el centro por defecto.

 const div = document.getElementById('lines') div.addEventListener('click', function() { var className = div.getAttribute("class"); if (className != 'open') { div.className = 'open'; } else { div.className = ''; } }) 
 #lines { width: 250px; height: 250px; position: absolute; cursor: pointer; transition: .25s ease-in-out; } #lines span { border: 1px solid black; display: block; position: absolute; height: 15px; width: 200px; background: #d3531a; border-radius: 9px; transition: transform .25s ease-in-out; } #lines span:nth-child(1) { top: 0px; } #lines span:nth-child(2) { top: 18px; left: 18px; } #lines span:nth-child(3) { top: 36px; left: 36px; } #lines.open span { transform: scaleX(0); }