이미지 전환 후 잔상 효과

감사합니다!!!

이미지 전환 후 잔상 효과

답변 해주셔서 감사합니다!** 먼저 HTML 입니다. Transition Window (사진) (사진) ** CSS 입니다.@charset "utf-8"; @import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); * { box-sizing: border-box; } body { margin: 0; } .container { width: calc(100% - 40px); height: calc(100vh - 40px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; } .front, .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .front { z-index: 1; } .front img, .back img { width: inherit; height: inherit; object-fit: cover; } .open-navi, .close-navi { background-color: #000; color: #fff; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; text-align: center; line-height: 40px; font-size: 1.5em; cursor: pointer; transition: 0.5s; } .open-navi { left: 0; } .open-navi.active { left: -40px; } .close-navi { right: -40px; } .close-navi.active { right: 0; }** 스크립트 입니다.$('.open-navi').click(function(){ $(this).addClass('active'); $('.close-navi').addClass('active'); $('.front').fadeOut(); $('.back').fadeIn(); }); $('.close-navi').click(function(){ $(this).removeClass('active'); $('.open-navi').removeClass('active'); $('.back').fadeOut(); $('.front').fadeIn(); });** 완성 후 이미지 입니다.(사진)(사진)-> 이미지 안의 표시된 부분과 같이 잔상 효과가 남습니다!(사진)-> 강의 화면 입니다!이 부분이 혹시 말씀하신 크로스페이드 되면서 생기는 현상일까요??사진까지 첨부하느라 글이 길어진 점 죄송합니다!감사합니다!