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被这样识别的原因，我已经读过一篇名为"过渡CSS持续时间不起作用"的帖子，但答案对我没有帮助。感谢

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>

Answer 2

看看这个：

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="box" ><br>
            </form>

CSS

.box {
  background: #2db34a;
  border-radius: 6px;
  cursor: pointer;
  height: 45px;
  line-height: 45px;
  text-align: center;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: linear;
  width: 95px;
    border:none;
}
.box:hover {
  background: #ff7b29;
}

演示