鼠标悬停在按钮上的动画过渡

Question

我有一个按钮，其背景为白色，边框为2px。 在:hover事件上，我创建了到彩色背景的过渡，但是当鼠标移出时，背景会立即闪烁为白色，而不是平滑地动画为白色。

我想念什么？

 html input[type="button"], .form-submit input[type="submit"] { margin: 10px 5px 10px 5px; -webkit-appearance: button; cursor: pointer; font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif; font-weight: normal; font-size: 13px; padding: 9px 15px; text-transform: uppercase; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-shadow: none; cursor: pointer; border: 2px solid #ff2e54; ; -webkit-border-radius: 40px; border-radius: 40px; color: #ff2e54; text-align: center; -o-text-overflow: clip; text-overflow: clip; letter-spacing: 1px; background: #fff; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0, 0); -moz-transition: all 0.3s cubic-bezier(0, 0, 0, 0); -o-transition: all 0.3s cubic-bezier(0, 0, 0, 0); transition: all 0.3s cubic-bezier(0, 0, 0, 0); } html input[type="button"]:hover, .form-submit input[type="submit"]:hover { background: rgba(255, 45, 84, 1); background: -moz-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 45, 84, 1)), color-stop(100%, rgba(255, 12, 72, 1))); background: -webkit-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%); background: -o-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%); background: -ms-linear-gradient(left, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%); background: linear-gradient(to right, rgba(255, 45, 84, 1) 0%, rgba(255, 12, 72, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2d54', endColorstr='#ff0c48', GradientType=1); border: 2px solid rgba(255, 255, 255, 0); color: #fff; -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5); -moz-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5); -o-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5); box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5); } html input[type="button"]:active, .form-submit input[type="submit"]:active { border: 2px solid #ff607f; background: #ff607f!important; color: #eee; -webkit-box-shadow: 0px 1px 1px 0px #c12140; -moz-box-shadow: 0px 1px 1px 0px #c12140; -o-box-shadow: 0px 1px 1px 0px #c12140; box-shadow: 0px 1px 1px 0px #c12140; } html input[type="button"]:disabled, .form-submit input[type="submit"]:disabled { -webkit-transition: all .2s ease-in-out 2s; -moz-transition: all .2s ease-in-out 2s; -o-transition: all .2s ease-in-out 2s; transition: all .2s ease-in-out 2s; cursor: default; background-color: #fff; border: 2px solid #E1E1E1; color: #BBB; box-shadow: none; } 

 <input value="Download" type="button" onclick="this.disabled=true; this.value='Starting..';location.href='#'"> 

Answer 1

据我所知，背景渐变不支持过渡，因此您必须摆脱渐变（无论如何还是很难看到），然后它可以工作：

 html input[type="button"], .form-submit input[type="submit"] { margin: 10px 5px 10px 5px; -webkit-appearance: button; cursor: pointer; font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif; font-weight: normal; font-size: 13px; padding: 9px 15px; text-transform: uppercase; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; box-shadow: none; cursor: pointer; border: 2px solid #ff2e54; ; -webkit-border-radius: 40px; border-radius: 40px; color: #ff2e54; text-align: center; -o-text-overflow: clip; text-overflow: clip; letter-spacing: 1px; background: rgba(255, 255, 255, 1); -webkit-transition: all 0.3s cubic-bezier(0, 0, 0, 0); transition: all 0.3s cubic-bezier(0, 0, 0, 0); } html input[type="button"]:hover, .form-submit input[type="submit"]:hover { background: rgba(255, 45, 84, 1); border: 2px solid rgba(255, 255, 255, 0); color: #fff; -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5); box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5); } html input[type="button"]:active, .form-submit input[type="submit"]:active { border: 2px solid #ff607f; background: #ff607f!important; color: #eee; -webkit-box-shadow: 0px 1px 1px 0px #c12140; -moz-box-shadow: 0px 1px 1px 0px #c12140; -o-box-shadow: 0px 1px 1px 0px #c12140; box-shadow: 0px 1px 1px 0px #c12140; } html input[type="button"]:disabled, .form-submit input[type="submit"]:disabled { -webkit-transition: all .2s ease-in-out 2s; -moz-transition: all .2s ease-in-out 2s; -o-transition: all .2s ease-in-out 2s; transition: all .2s ease-in-out 2s; cursor: default; background-color: #fff; border: 2px solid #E1E1E1; color: #BBB; box-shadow: none; } 

 <input value="Download" type="button" onclick="this.disabled=true; this.value='Starting..';location.href='#'"> 

如果您仍然想要渐变，则应查看gradient-position属性的过渡-检查此答案 。

Answer 2

我将您的CSS剥离了一下..然后它起作用了。

我认为浏览器不喜欢所有的渐变属性，它的影响非常小，是否有必要吗？

input[type="button"] {
  margin: 10px 5px 10px 5px;
  -webkit-appearance: button;
  cursor: pointer;
  font-family: Aktiv-Grotesk, Verdana, Geneva, sans-serif;
  font-weight: normal;
  font-size: 13px;
  padding: 9px 15px;
  text-transform: uppercase;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  box-shadow: none;
  cursor: pointer;
  border: 2px solid #ff2e54;
  ;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  color: #ff2e54;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: #fff;
  transition: 0.3s;
}

input[type="button"]:hover {
  background: rgba(255, 45, 84, 1);
  border: 2px solid rgba(255, 255, 255, 0);
  color: #fff;
  -webkit-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -moz-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  -o-box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
  box-shadow: 0px 2px 7px -1px rgba(255, 45, 85, 0.5);
}

html input[type="button"]:active {
  border: 2px solid #ff607f;
  background: #ff607f!important;
  color: #eee;
  -webkit-box-shadow: 0px 1px 1px 0px #c12140;
  -moz-box-shadow: 0px 1px 1px 0px #c12140;
  -o-box-shadow: 0px 1px 1px 0px #c12140;
  box-shadow: 0px 1px 1px 0px #c12140;
}

html input[type="button"]:disabled,
.form-submit input[type="submit"]:disabled {
  -webkit-transition: all .2s ease-in-out 2s;
  -moz-transition: all .2s ease-in-out 2s;
  -o-transition: all .2s ease-in-out 2s;
  transition: all .2s ease-in-out 2s;
  cursor: default;
  background-color: #fff;
  border: 2px solid #E1E1E1;
  color: #BBB;
  box-shadow: none;
}

您可以看到它在此提琴中起作用： https : //jsfiddle.net/nvqukp3L/1/