:before :after伪类实现鼠标悬浮动画

<div id="meizu1">
    <li>dede</li>
</div>

div#meizu1 li:before{
                content: url(11.png);
                position: relative;
                display: block;
                transition: transform 1s;
                
            }
            div#meizu1 li:after{
                content: url(12.png);
                position: relative;
                top: -442px;
                display: block;
                transition: transform 1s;
            }
                
            div#meizu1 li:hover:before{
                transform: translate(-10%,0);
            }
            
            
            div#meizu1 li:hover:after{
                transform: translate(10%,0);
            }
            
            li{
                list-style-type: none;
                width: 500px;
                margin: 20px auto; 
            }