css显示与滑动效果

<style>
*{margin:0;padding:0;box-sizing: border-box;}
.vertical{position:absolute;right: 0;width: 40px;height:1000px;background: #000;}
.vertical .member{position:relative;width: 40px;height: 40px;margin-top:50px;}
.vertical .member .pic{width: 100%;height: 100%;}
.move{display:none;position: absolute;right: 90px;top: 0;width: 100px;height: 40px;background: #000;opacity: .5;}
.vertical .member:hover .move{display:block;right:40px;animation: move .5s ease-out 1;}
@keyframes move{from{right: 90px;}to{right: 40px;}}

</style>

<div class="vertical">
<div class="member">
<img class="pic" src="img/1.png" alt="" />
<span class="move"></span>
</div>
</div>