x 버튼으로 변경후에 위치 이동에서 자연스러운 애니메이션이 안돼요 ㅠㅠ

강의 너무 재미있고 잘듣구있습니다!

너무너무 알차요~!~!~!

근데 ㅠㅠ 다 되는데 이상하게 하나가.. 안따라지네요..

햄버거 바 버튼에서  x 버튼으로 자연스러운 이미지 변환은 가능한데요!

x버튼이 사이드바를 따라서 스르륵 이동하는게  안되네요 ..

ㅠㅠ.. 제가보기엔 소스코드가  같은거같은데

어디가 잘못된건지.. ㅠㅠ 이틀을 .. 계속 강의따라서 다시 코드 타이핑을 해봐도 같아서.. 질문드립니다 !

input[id=trigger]{
    display: none;
}

label[for=trigger]{
    border: 1px solid red;
    width: 30px;
    height: 20px;
    display: inline-block;
    position: absolute;
    transition: 0.3s;
    
}

label[for=trigger] span{
    display: block;
    height: 2px;
    width: 100%;
    background-color: black;
    position:absolute;
    left: 0;
    cursor: pointer;
    transition: 0.3s;
    z-index: 100;
}

label[for=trigger] span:nth-child(1){
    top: 0;
}
label[for=trigger] span:nth-child(2){
    top: 50%;
}
label[for=trigger] span:nth-child(3){
    top: 100%;
}

/* display: none; 이지만 label과 같은 이름이기때문에 체크가 된다. */
input[id=trigger]:checked + label span:nth-child(1){
 top: 50%;
 transform: rotate(45deg);
 
}
input[id=trigger]:checked + label span:nth-child(2){
    opacity: 0;
   }
input[id=trigger]:checked + label span:nth-child(3){
top: 50%;
transform: rotate(-45deg);

}


.sidebar{
    width: 250px;
    height: 100vh;
    background-color: pink;
    position: fixed;
    top:0;
    left: -250px;
    transition: 0.3s;
}


input[id=trigger]:checked ~ .sidebar{
    left: 0px;
}

input[id=trigger]:checked + label{
    left: 250px;
}