смена background-color слева на право без javascript

.wrapper { 
  width: 200px; 
  height: 70px; 
  background-color: black; 
  cursor: pointer; 
  position: relative; 
  overflow: hidden;   
  color: #fff; 
} 
.wrapper:before{ 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: -100%; 
  width: 200%; 
  height: 100%; 
  background: linear-gradient(to right, rgba(0,128,0,1) 0%,rgba(0,128,0,1) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%); 
  transition: left .7s; 
} 
.wrapper:hover:before{ 
  left: 0; 
} 
.block{ 
  position: relative; 
  height: 100px; 
}

<div class="wrapper"> 
   <div class="block"></div> 
</div>