在 hover 从左到右，从左到右填充具有倾斜背景的元素

Question

Is there any way to make this same animation while also having a slanted background?

either using pure css or react spring?

Hover animation

i have tryed both solutions under but non of em go me slander background + the left to right, left to right animation.

HTML:

<div>Box</div>

How i want the slider to look like with slander.

      div {
        position: relative;
        display: inline-block;
        padding: 15px 70px;
        color: #B17461;
        font-size: 30px;
        transition: color .5s;
        overflow:hidden;
      }

      div:before {
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 150%; height: 100%;
        background: #B17461;
        z-index: -1;
        transform-origin:0 0 ;
        transform:translateX(-100%) skewX(-45deg);
        transition: transform .5s;
      }

      div:hover {
        color: #fff;
      }

      div:hover:before {
        transform: translateX(0) skewX(-45deg);
      }

and under her is the animation goal:

      div {
        position: relative;
        display: inline-block;
        padding: 15px 70px;
        color: #B17461;
        font-size: 30px;
        transition: color .5s;
        overflow:hidden;
        background: linear-gradient(#488566 0 0) no-repeat;
        background-size: 0% 100%;
        background-position: 100% 0%;
        transition: background-size .4s;
      }

      div:hover {
        background-size: 100% 100%;
        background-position: 0% 0%;
        transition: background-size .4s;
      }

Answer 1

here is a working example: Hover LTR animation

HTML:

    <div class="skillsDouble">
    <ul>
        <li><a href="#">Automation</a>
        </li>
        <li><a href="#">TDD</a>
        </li>
    </ul>
</div>

CSS:

    ul {
    list-style-type:none;
}
ul li a {
    text-decoration:none;
}
.skillsDouble {
    float: left;
    margin-right: 1px;
}
.skillsDouble li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to left, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    margin-left:10px;
    transition:all 2s ease;
}
.skillsDouble li:hover {
    background-position:left bottom;
}
.skillsDouble li a {
    color:white;
}