Custom checkbox not transitioning - css

Question

So I got this CSS Custom Checkbox but transitions doesn't seem to work on it. I didn't make the code tho, I got it from here.
Here is my slightly modified version:
.checkbox {
position: absolute;
opacity: 0;
}
.checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
}
.checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: #ccf2ff;
border-radius: 6px;
box-shadow: 0 0 0 3px #99e6ff;
}
.checkbox:hover + label:before {
background: #80dfff;
}
.checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.checkbox:checked + label:before {
background: #33ccff;
}
.checkbox:disabled + label {
cursor: auto;
}
.checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 9px;
background: white;
width: 2px;
height: 2px;
box-shadow:
2px 0 0 white,
4px 0 0 white,
4px -2px 0 white,
4px -4px 0 white,
4px -6px 0 white,
4px -8px 0 white;
transform: rotate(45deg);
}
.checkbox, .button, input, select
{
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
Every other transition works fine, it's just the checkbox thats the problem. Am I missing something here? Or is there something wrong with the code that's making transitions not work? Please help me.

Answer 1

You are applying your custom checkbox style to the :before pseudo element of the label tag so you just need to apply the transition to that also:
.checkbox,
.button,
input,
select,
.checkbox + label:before
{
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}