CODEWITHSUNDEEP
csssvg
Swagata Adhikary
Swagata Adhikary

Reputation: 275

Custom Checkbox animation on check and uncheck: CSS

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;
}

Upvotes: 0

Views: 2019

Answers (1)

Terry
Terry

Reputation: 66123

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

Upvotes: 4

Related Questions