CSS3 problem with animation when unchecking a checkbox - css

Question

I'm trying to recreate my form's checkboxes by CSS3.
I animated the mark (checkbox) correctly, but when I uncheck the checkbox I can't start the animation in reverse mode. I reproduced my example.
/*
==================
INPUT CHECKBOX
==================
*/
.checkbox-label>input {
display: none;
outline: none;
}
/*
==============
LABEL CHECKBOX
==============
*/
.checkbox-label {
display: block;
position: relative;
font-size: 0.95em;
margin-bottom: 10px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
.checkbox-label:hover>.checkbox-button {
box-shadow: 0px 0px 0px 5px hsla(255, 100%, 60%, 0.1);
background-color: hsla(255, 100%, 60%, 0.1);
}
.checkbox-label:hover>.checkbox-button {
border: 2px solid #808080;
}
/*
======================
MARK CHECKBOX - AFTER
======================
*/
.checkbox-label>input[type="checkbox"]~.checkbox-button::after {
content: "";
position: absolute;
top: 8px;
left: 3px;
border-right: 2px solid transparent;
border-bottom: 2px solid transparent;
transform: rotate(45deg);
transform-origin: left bottom;
}
/*
================================
MARK CHECKBOX - AFTER - CHECKED
================================
*/
.checkbox-label>input[type="checkbox"]:checked~.checkbox-button::after {
animation: checkbox-check 0.3s cubic-bezier(0.5, 0, 0.23, 1);
animation-fill-mode: forwards;
animation-direction: normal;
}
.checkbox-label:not(:active)>input[type="checkbox"]:not(:checked)~.checkbox-button::after {
animation-direction: reverse;
}
/*
========
CHECKBOX
========
*/
.checkbox-button {
vertical-align: sub;
}
.checkbox-button {
position: relative;
top: 0px;
left: 0px;
color: #808080;
height: 20px;
width: 20px;
background-color: transparent;
border: 2px solid #ccc;
border-radius: 5px;
display: inline-block;
transition: background-color 0.4s ease;
}
.checkbox-label>input:checked~.checkbox-button {
background-color: transparent;
border: 2px solid #6633ff;
background-color: #6633ff;
}
.checkbox-label>input~.checkbox-button::before {
content: "";
position: absolute;
left: -8px;
top: -8px;
width: 35px;
height: 35px;
background-color: #6633ff;
border-radius: 30%;
opacity: 0.6;
transform: scale(0);
}
.checkbox-label>input:checked~.checkbox-button::before {
animation: ripple 0.9s ease-out;
}
/*
==========
ANIMATION
==========
*/
#keyframes ripple {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#keyframes checkbox-check {
0% {
width: 0px;
height: 0px;
border-color: white;
transform: translate3d(0, 0, 0) rotate(45deg);
}
33% {
width: 5px;
height: 0px;
transform: translate3d(0, 0px, 0) rotate(45deg);
}
100% {
width: 5px;
height: 11px;
border-color: white;
transform: translate3d(0, -11px, 0) rotate(45deg);
}
}
<form action="" method="post" class="form">
<h1>Custom Checkboxe</h1>
<label class="checkbox-label" data-label="One">
<input type="checkbox" checked="checked" />
<span class="checkbox-button"></span>
One
</label>
</form>
Let me know what I'm doing wrong and how to improve to make my animation work properly.