Why is this CSS transition not working as intended? [duplicate] - html

Question

This question already has answers here:
How to have multiple CSS transitions on an element?
(9 answers)
Closed 7 years ago.
I have a submit button in a form and I'm trying to make a simple on-hover transition. I want it to Swap the colors of the button's text and the button's background color. The way I have it right now, the text successfully transitions over time, but the background color is still switching colors instantly. How do I fix this to make the background color also change over time? I am using Google Chrome, so I only put in the -webkit-transition. Once I get this working I'll add the others for other browsers.
Here's my simplified code:
<form method="post" action="processRegistration.php">
<input class="submitbutton" type="submit" name="submit" value="Create Account" />
<form>
CSS:
#signupform
form
.submitbutton {
margin: 0 auto;
border-radius: 5px;
border: solid 2px #66cc66;
background-color: #66cc66;
color: white;
-webkit-transition: background-color 1s;
-webkit-transition: color 0.5s; }
#signupform
form
.submitbutton:hover {
background-color: white;
color: #66cc66;
-webkit-transition: background-color 1s;
-webkit-transition: color 0.5s; }
http://jsfiddle.net/ewkruuk3/

Answer 1

This is because you are declaring the transition twice. You are basically overriding the first transition with the second one. In CSS if there are two of the same rules, the last one applies. You have to seperate both by a comma in one declaration.
transtion: color .5s, background-color 1s;
Ideally though your css can be simplified to the following:
.submitbutton {
// Other rules
background-color: #66cc66;
color: white;
-webkit-transition: background-color 1s, color 0.5s;
transition: background-color 1s, color 0.5s; // Include this for browser compatability
&:hover {
background-color: white;
color: #66cc66;
}
}
You don't need a transition on :hover as the transition in the parent rule will also apply.