在 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%;，您正在使用它应该是您正在寻找的行为。