html - CSS 过渡持续时间不适用于表单提交按钮

Question

我对 transition-duration 属性有疑问。

在我的表单的提交按钮上似乎不起作用，但在我的主菜单列表项上却完美地工作。

这是我的 HTML

     <form action="check_registration.php" autocomplete="on">
                <label for="nick">Identifiant : </label><input name="nick" type="text" required placeholder="Obligatoire"><br>
                <label for="password">Mot de Passe : </label><input name="password"type="password" required placeholder="Obligatoire"><br>
                <label for="email">Adresse mail : </label><input name="mail"type="email" required placeholder="Obligatoire"><br>
                <input type="submit" value="Inscription" class="button col-center" ><br>
            </form>

然后是我的 CSS

    #wrap form {

label{
    display: inline-block;
    width: 120px;
    margin-bottom: 10px;
}

input{
    float: right;
}
.button{
    float: none;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 50px;
    background: url(../../media/header.png);
    border-radius: 3px;
    color: #fff;
}
.button:hover{
    background: linear-gradient(to bottom, rgba(255,150,0,1) 0%,rgba(255,195,110,1) 80%);
    transition-duration: 1.5s;
}}

我使用 SASS，这就是 CSS 如此标识的原因，我已经阅读了名为“Transition CSS duration not working”的帖子，但答案对我没有帮助。谢谢

Answer 1

过渡还不适用于背景渐变，即使从图像切换也不适用。

这个效果可以通过背景元素和过渡按钮透明度来完成。

http://codepen.io/justindunham/pen/rylLc

<div class="btn-wrap">
   <input type="submit" value="Inscription" class="button col-center" >
   <span class="button-bg"></span>
</div>