TweenMax 적용 시 hover가 안되나요?

임의로 카드들을 회전하게 하여 화면이 bottom으로 이동했을 경우 다시 원래대로 카드를 회전시키는 기능을 추가하였습니다. 그러나 이 경우에 마우스 커서를 가져다대어도 카드가 움직이지 않습니다. 카드가 회전을 마친 후 마우스를 가져다 댔을 때 hover 동작까지 수행하게 하려면 어떻게 바꿔야 하는지 궁금합니다.

TweenMax.to("li", 2.5, {
        rotateY: 0,
        delay: 2.2,
        ease: Power3.easeInOut
    });

js 파일에서는 이 부분만을 추가하였고 scss 파일에서는 다음과 같이 변경하였습니다.

ul {
                 perspective: 400px;
                li {
                    display: inline-block;
                    margin: 0 2%;
                    width: 130px;
                    height: 200px;
                    border-radius: 6px 6px 6px 6px;
                    box-sizing: border-box;
                    padding: 10px;
                    transform: rotateY(45deg);
                    cursor: pointer;

                    p {
                        font-size: 40px;
                        color: #fff;
                        border-bottom: 2px dashed #fff;
                    }

                    &:nth-child(1) {
                        background: linear-gradient(45deg, #f7b733, #fc4a1a);
                    }
                    &:nth-child(2) {
                        background: linear-gradient(45deg, #FC00FF 0%, #401241 100%);
                    }
                    &:nth-child(3){
                        background-image: linear-gradient(45deg, #ce713b 0%, #F7CE68 100%);
                    }
                    &:nth-child(4){
                        background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
                    }

                    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);

                    &:hover {
                        transform: translateY(-20px);
                    }
                }
            }

var liAll = document.querySelectorAll("li");

    liAll.forEach(function(li){
        li.addEventListener("mouseenter", function(e){ <- 마우스 오버시
            TweenMax.to(this, .5, {
                rotateY: 30,
                ease: Power3.easeOut
            });    
        })
        li.addEventListener("mouseout", function(e){ <- 마우스 아웃시
            TweenMax.to(this, .5, {
                rotateY: 0,
                ease: Power3.easeOut
            });    
        })
    })
    
    TweenMax.set("li", { <- set으로 초기 값 셋팅
        rotateY: Math.random()*100, <- 랜덤은 예시입니다.
    });
    TweenMax.to("li", 2.5, {
        rotateY: Math.random()*100,
        delay: 2.2,
        ease: Power3.easeInOut
    });