CSS Transitions won't work to animate class change

Question

I am trying to get a gradient to animate its application on a div. I was going to use JS to do this, but I learned thought that CSS transitions would be a better approach.

I have quite a few buttons, who all inherit the containerButton class. They each have their own individual IDs, though. Here is an example of the logout button. I have applied the transition to the containerButton and containerButton:hover definitions, but still no luck, the change just occurs instantly.

Here is the 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;
}