//css begin
<style>
.wrap{
width: 200px;
height: 30px;
border: 1px solid #000;
overflow: hidden;
}
.box{
width: 400px;
height: 30px;
background: repeating-linear-gradient(30deg,green 0,green 10px,#fff 10px,#fff 20px);
transition: 3s;
}
.wrap:hover .box{
margin-left: -100px;
}
</style>
//css end
//html begin
<div class="wrap">
<div class="box"></div>
</div>
//html end