CSS3取消选中复选框时动画出现问题

我正在尝试通过CSS3重新创建表单的复选框

我正确设置了标记（复选框）的动画，但当我取消选中复选框时，我无法以反向模式启动动画

/*
==================
输入复选框
==================
*/
.复选框标签>输入{
显示：无；
大纲：无；
}
/*
==============
标签复选框
==============
*/
.复选框标签{
显示：块；
位置：相对位置；
字号：0.95em；
边缘底部：10px；
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
大纲：无；
}
.checkbox标签：悬停>.checkbox按钮{
盒影：0px 0px 0px 5px hsla（255,100%，60%，0.1）；
背景色：hsla（255,100%，60%，0.1）；
}
.checkbox标签：悬停>.checkbox按钮{
边框：2px实心#808080；
}
/*
======================
标记复选框-之后
======================
*/
.checkbox标签>输入[type=“checkbox”]~.checkbox按钮：：之后{
内容：“；
位置：绝对位置；
顶部：8px；
左：3px；
右边框：2px实心透明；
边框底部：2倍纯色透明；
变换：旋转（45度）；
变换原点：左下角；
}
/*
================================
选中后标记复选框
================================
*/
.checkbox标签>输入[type=“checkbox”]：选中~.checkbox按钮：：之后{
动画：复选框选中0.3s立方贝塞尔（0.5,0,0.23,1）；
动画填充模式：正向；
动画方向：正常；
}
.checkbox标签：not（：active）>输入[type=“checkbox”]：not（：checked）~.checkbox按钮：：after{
动画方向：反向；
}
/*
========
复选框
========
*/
.复选框按钮{
垂直对齐：次对齐；
}
.复选框按钮{
位置：相对位置；
顶部：0px；
左：0px；
颜色：#808080；
高度：20px；
宽度：20px；
背景色：透明；
边框：2个实心#ccc；
边界半径：5px；
显示：内联块；
过渡：背景色0.4s；
}
.checkbox标签>输入：选中~.checkbox按钮{
背景色：透明；
边框：2个实心#6633ff；
背景色：#6633ff；
}
.checkbox标签>输入~.checkbox按钮：：之前{
内容：“；
位置：绝对位置；
左：-8px；
顶部：-8px；
宽度：35px；
高度：35px；
背景色：#6633ff；
边界半径：30%；
不透明度：0.6；
变换：比例（0）；
}
.checkbox标签>输入：选中~.checkbox按钮：：之前{
动画：涟漪0.9秒减缓；
}
/*
==========
动画
==========
*/
@关键帧波纹{
0% {
变换：比例（0）；
}
50% {
变换：比例（1）；
}
100% {
不透明度：0；
变换：比例（1）；
}
}
@关键帧复选框检查{
0% {
宽度：0px；
高度：0px；
边框颜色：白色；
变换：平移3D（0,0,0）旋转（45度）；
}
33% {
宽度：5px；
高度：0px；
变换：平移3d（0，0px，0）旋转（45度）；
}
100% {
宽度：5px；
高度：11px；
边框颜色：白色；
变换：平移3d（0，-11px，0）旋转（45度）；
}
}

定制支票盒
一个

欢迎来到Stack Overflow，Andrea！将来，请确保在问题本身中包含与您的问题相关的代码，即使您也链接到它。欢迎使用堆栈溢出，Andrea！将来，请确保在问题本身中包含与您的问题相关的代码，即使您也链接到它。