在45度角的div中创建悬浮渐变动画？

Question

我试图在div中进行悬停效果。当我将鼠标悬停在div背景上时，渐变会变换45度，但我面临的问题是我无法使其成为0到100％意味着我想要正常显示灰色。当我将悬停时，绿色将逐渐显示45度。我怎么能这样做？

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

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

Answer 1

如果您将background-size: 200% 100%;设置为background-size: 300% 100%;，那么它应该是您正在寻找的行为。