CSS Transitions无法为类更改设置动画

Question

我正在尝试使用渐变来为div上的应用程序设置动画。我打算用JS来做这件事，但我学会了认为CSS转换是一种更好的方法。

我有很多按钮，都继承了containerButton类。但是，每个人都有自己的个人身份证。以下是logout按钮的示例。我已将过渡应用于containerButton和containerButton:hover定义，但仍然没有运气，这种变化只会立即发生。

这是HTML / CSS：

<!-- HTML for button -->
<input id="logoutYes" class="containerButton" style="width: 125px; 
       margin-top: 10px; margin-left: 220px; color: #111100; font-weight: bold; 
       padding-top: 12.5px;" type="button" value="YES, LOGOUT" id="loginButton" 
       onclick="logout();" />

/* CSS */
.containerButton, .containerButtonSelected, .containerButtonSelectedToggle, .containerMini {
float: left;
text-align: center;
font-size: 14px;
width: 50px;
/* for IE */
filter: alpha(opacity=100);
/* CSS3 standard */
opacity: 1.0;
cursor: pointer;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

transition-property: background, filter;
transition-duration: 1s;
transition-delay: 0s;
}

.containerButtonSelected, .containerButton:hover, #logoutYes:hover {
background: #f0f0ee; /* Old browsers */
background: -moz-linear-gradient(top, #f0f0ee 7%, #8c95ff 83%, #303eff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(7%,#f0f0ee), color-stop(83%,#8c95ff), color-stop(100%,#303eff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0f0ee 7%,#8c95ff 83%,#303eff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0f0ee 7%,#8c95ff 83%,#303eff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0f0ee 7%,#8c95ff 83%,#303eff 100%); /* IE10+ */
background: linear-gradient(to bottom, #f0f0ee 7%,#8c95ff 83%,#303eff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0ee', endColorstr='#303eff',GradientType=0 ); /* IE6-9 */

transition-property: background, filter;
transition-duration: 3s;
transition-delay: 1s;
}