[css] Fill background color left to right CSS

Having a play around with some css3 today, transitions mainly.

What i would like to achieve is that upon hover of an li element the background will fill from left to right with a different colour, ideally i would like to be able to fill half way or all the way.. I have started a jsfiddle

Do i need to use the property

-vendor-prefix transition 

Could anyone give me some pointers on achieving this please.

Thanks

If you are like me and need to change color of text itself also while in the same time filling the background color check my solution.

Steps to create:

1. Have two text, one is static colored in color on hover, and the other one in default state color which you will be moving on hover
2. On hover move wrapper of the not static one text while in the same time move inner text of that wrapper to the opposite direction.
3. Make sure to add overflow hidden where needed

Good thing about this solution:

• Support IE9, uses only transform
• Button (or element you are applying animation) is fluid in width, so no fixed values are being used here

Not so good thing about this solution:

• A really messy markup, could be solved by using pseudo elements and att(data)?
• There is some small glitch in animation when having more then one button next to each other, maybe it could be easily solved but I didn't take much time to investigate yet.

Check the pen ---> https://codepen.io/nikolamitic/pen/vpNoNq

<button class="btn btn--animation-from-right">
  <span class="btn__text-static">Cover left</span>
  <div class="btn__text-dynamic">
    <span class="btn__text-dynamic-inner">Cover left</span>
  </div>
</button>

.btn {
  padding: 10px 20px;
  position: relative;

  border: 2px solid #222;
  color: #fff;
  background-color: #222;
  position: relative;

  overflow: hidden;
  cursor: pointer;

  text-transform: uppercase;
  font-family: monospace;
  letter-spacing: -1px;

  [class^="btn__text"] {
    font-size: 24px;
  }

  .btn__text-dynamic,
  .btn__text-dynamic-inner {    
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 2;

    transition: all ease 0.5s;
  }

  .btn__text-dynamic {
    background-color: #fff;
    color: #222;

    overflow: hidden;
  }

  &:hover {
    .btn__text-dynamic {
      transform: translateX(-100%);
    }
    .btn__text-dynamic-inner {
      transform: translateX(100%);
    }
  }
}

.btn--animation-from-right {
    &:hover {
    .btn__text-dynamic {
      transform: translateX(100%);
    }
    .btn__text-dynamic-inner {
      transform: translateX(-100%);
    }
  }
}

You can remove .btn--animation-from-right modifier if you want to animate to the left.

A single css code on hover can do the trick: box-shadow: inset 100px 0 0 0 #e0e0e0;

A complete demo can be found in my fiddle:

https://jsfiddle.net/shuvamallick/3o0h5oka/