Custom Checkbox animation on check and uncheck: CSS - css

Question

I am using a checkbox in my html project. I have taken the reference from this link.
https://codepen.io/andreasstorm/pen/deRvMy.
When the checkbox is checked the svg animation is perfectly fine. But when I unchecked the checkbox there is no animation. How can I make the reverse animation while unchecking the checkbox by using the same animation from default to checked. Please help.
<div class="radiocheckcontainer">
<input type="checkbox" id="cbx" />
<label for="cbx" class="check">
<svg width="18px" height="18px" viewBox="0 0 18 18">
<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
<polyline points="1 9 7 14 15 4"></polyline>
</svg>
<span>remember me</span>
</label>
.radiocheckcontainer input{
display: none;
}
.check {
cursor: pointer;
position: relative;
margin: 0 auto;
-webkit-tap-highlight-color: transparent;
transform: translate3d(0, 0, 0);
}
.check svg {
position: relative;
z-index: 1;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: #D8DAE6;
stroke-width: 1;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease-in-out;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
}
.check svg path {
stroke-dasharray: 60;
stroke-dashoffset: 0;
}
.check svg polyline {
stroke-dasharray: 22;
stroke-dashoffset: 66;
}
.check:hover svg {
stroke: #073AAB;
}
#cbx:checked + .check svg {
stroke: #073AAB;
}
#cbx:checked + .check svg path {
stroke-dashoffset: 60;
transition: all 0.3s linear;
}
#cbx:checked + .check svg polyline {
stroke-dashoffset: 42;
transition: all 0.2s linear;
transition-delay: 0.15s;
}
.radiocheckcontainer label span{
font-weight: normal;
font-size: 0.875rem;
color: #B7B9CB;
text-transform: capitalize;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}

Answer 1

That's because the path and polyline elements in the unchecked state does not have any transitions attached to it: therefore, you don't see any transition when reverting to the unchecked state.
If you declare the same transition properties to the unchecked state, and simply move the transition-delay to the path, it should work as expected:
.check
svg
path
stroke-dasharray: 60
stroke-dashoffset: 0
transition: all .3s linear // Add this line
transition-delay: .15s // Add this line
polyline
stroke-dasharray: 22
stroke-dashoffset: 66
transition: all .2s linear // Add this line
See proof-of-concept here: https://codepen.io/terrymun/pen/NWGoezb