css3鼠标悬浮滑块

<div class="block">
        <div class="wrap">
            <div class="sliderleft">你还发爱国</div>
            <div class="slider">
                <ul class="memulist">
                    <li>菜单一</li>
                    <li>菜单二</li>
                    <li>菜单三</li>
                </ul>
            </div>
        </div>
    </div>

.block {
            width: 300px;
            height: 400px;
            overflow: hidden;
        }
        
        .wrap {
            width: 600px;
            height: 400px;
            background: red;
            transition: transform .75s;
            transform: translateX(0px)
        }
        
        .block:hover .wrap {
            transition: transform .75s;
            transform: translateX(-300px)
        }
        
        .sliderleft {
            float: left;
            width: 300px;
            height: 400px;
            background: #399999;
        }
        
        .slider {
            float: left;
            width: 300px;
            background: orange;
            height: 400px;
        }
        
        .memulist li {
            transition: opacity 0.25s, transform 0.25s;
            opacity: 0;
            transform: translate(-30px, 35px)
        }
        
        .block:hover .memulist li {
            opacity: 1;
            transform: translate(0, 0);
        }
        
        .block:hover .memulist li:nth-child(1) {
            /* transition: opacity 0.25s, transform 0.25s; */
            transition-delay: 0.25s;
        }
        
        .block:hover .memulist li:nth-child(2) {
            /* transition: opacity .5s, transform .5s;
             */
            transition-delay: 0.5s;
        }
        
        .block:hover .memulist li:nth-child(3) {
            /* transition: opacity .75s, transform .75s; */
            transition-delay: 0.75s;
        }