Why doesn't a CSS transition to the default style work? - css

Question

I've been procrastinating by trying to make a fancier HTML checkbox, using Font Awesome for icons. I'm almost happy with this: (CodePen)
HTML
<input type="checkbox" id="cb"/>
<label for="cb">
<i class='icon-check-sign'></i>
</label>
CSS
#cb {
display: none;
}
#cb + label {
font-size: 64px;
color: #002b36; /* black */
transition: color 1s;
}
/* hover */
#cb + label:hover > i {
color: #268bd2; /* blue */
transition: color 1s;
}
/* checked */
#cb:checked + label > i {
color: #859900; /* green */
transition: color 1s;
}
/* checked + hover */
#cb:checked + label:hover > i {
color: #dc322f; /* red */
transition: color 1s;
}
(The colours and transition duration are exaggerated to make the issue more visible.)
My problem is that the colour changes smoothly when going from the default state to the hover state (the cursor is moved over the icon), from hover to checked (the icon is clicked), and from hover+checked to checked (the cursor is moved away). However, when going from hover back to default (the mouse cursor is moved away from an unchecked icon), the color doesn't transition but changes immediately.
Why does that happen and how could it be fixed? Bonus question: can this effect be somehow done without as much extra markup? (The <i> and the <label>.)
(I also suppose this would be more usable if I swapped between a checked and unchecked icon, but that seems like it would require chaining two transitions on different elements and I've no idea if that's even possible with CSS alone.)

Answer 1

You're missing a > i
#cb + label > i {
font-size: 32px;
color: #002b36; /* black */
transition: color 1s;
}
Updated CodePen

Answer 2

if you have a transtion in the :hover like this
something:hover{
transition: ...;
}
The transition will only apply when you hover so you need to put the transition in the default style for it to transition all states
like this
something{
color: red;
transition: all 200ms ease;
}
something:hover{
color: blue;
}
So in your case you need to add the following styles.
#cb + label i {
transition: color 1s;
}

Answer 3

solution
demo: http://jsfiddle.net/SuunK/2/
the markup:
<input type=checkbox id=cb hidden>
<label for=cb></label>
the style:
[for=cb] {
padding: 5px 16px;
position: relative;
border-radius: 4px;
background-color: black;
transition: background-color 1s;
}
[for=cb]:before,[for=cb]:after{
content:'';
position:absolute;
}
[for=cb]:before{
width: 6px;
height: 10px;
background: white;
-webkit-transform: rotateZ(-45deg);
left: 8px;
bottom: 6px;
}
[for=cb]:after{
width: 5px;
height: 16px;
background: white;
-webkit-transform: rotateZ(45deg);
right: 13px;
bottom: 5px;
}
[for=cb]:hover{
background-color: #268bd2; /* blue */
}
/* checked */
#cb:checked + label{
background-color: #859900; /* green */
}
/* checked + hover */
#cb:checked + label:hover{
background-color: #dc322f; /* red */
}