Me gustaría que cuando hacemos clic en mi menú se convierta en una cruz, no entiendo por qué no funciona. Lo que seria bueno es poder lanzar una animacion cuando otra termina en css

El objetivo de la animación es que los tramos superior e inferior desaparezcan y los dos tramos pequeños del medio crezcan y giren 45 grados.

Gracias por su ayuda, aquí está mi código en codepen a continuación

https://codepen.io/JulienMtau/pen/abOBREK

 .icon-menu { cursor: pointer; width: 30px; height: 24px; position: relative; & > span:first-child { transition: width 0.2s; position: absolute; top: 50%; background: black; width: 40%; height: 1px; } & > span:last-child { transition: width 0.2s, transform 0.2s; position: absolute; top: 50%; transform: translateX(150%); background: black; width: 40%; height: 1px; } & > span:nth-of-type(2) { transition: width 0.2s, margin-left 0.2s; position: absolute; top: 50%; width: 100%; &::before, &::after { content: ""; position: absolute; width: 100%; height: 1px; background: black; } &::before { transform: translateY(-7px); } &::after { transform: translateY(7px); } } .active:first-of-type { animation: burgerToCrossForFirst 1s; } .active:nth-of-type(2) { transition: width 0.2s, margin-left 0.2s; width: 0%; margin-left: 50%; } .active:last-of-type { animation: burgerToCrossForLast 0.2s; } } @keyframes burgerToCrossForFirst { 0% { width: 50%; } 50% { width: 100%; } 100% { transform: rotate(45deg); } } @keyframes burgerToCrossForLast { 0% { width: 50%; transform: translateX(100%); } 50% { width: 100%; transform: translateX(0%); } 100% { transform: translateX(0%) rotate(-45deg); } }