Micro-interactions are tiny animations or responses. They make the user experience special by adding small, delightful details that make interactions feel more lively and enjoyable.

We will build this animated checkbox interaction tweaking some CSS properties only.

There are three parts to this interaction-

• The box icon
• The check icon
• The line

Both the box and check icons are SVG elements defined by a path. The line is a div element, and its animation is controlled by changing its width, creating a strikethrough effect across the entire word.

Animating the stroke property

The animation of the box and check icon is controlled through stroke-dasharray and stroke-dashoffset property of SVG's path.

<svg
  viewBox="0 0 20 20"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M19 10.3333V12.3333M19 12.3333V17C19 18.1046 18.1046 19 17 19H3C1.89543 19 1 18.1046 1 17V3C1 1.89543 1.89543 1 3 1H17C18.1046 1 19 1.89543 19 3V12.3333Z"
    stroke="#6086e8"
    stroke-width="2"
    stroke-linecap="round"
    stroke-dasharray="80"
    stroke-dashoffset="0"
    class="box-icon"
  />
</svg>

The path must have stroke property for other stroke properties to work.

• stroke-dasharray controls the length and gap of the stroke's path.

  For example, stroke-dasharray="10" means each dash is of 10px long. This attribute also accepts multiple values. stroke-dasharray="10 2" means each dash is 10px long and distance between them is 2px. If the second value is not given, default will be same as dash length. It can have more than 2 values and each pair represent a dash and a gap.

• stroke-dashoffset is used to adjust the starting position of the dashed line along the path.

The idea is to to set the initial stroke-dasharray length so long that it covers the whole path. Then change only the stroke-dashoffset path from 0 to length of the path.

Since both stroke-dasharray and stroke-dashoffset are presentational attributes, these can be controlled with CSS. We can apply transition to stroke-dashoffset property and that helps to make the dashes look animated.

              
  svg path {
    transition: 0.4s stroke-dashoffset ease-out;
    stroke-dasharray: 80;
    stroke-dashoffset: 0;
  }
              
            

Orchestrating with transition-delay

The next part is the transition-delay which indicates when the transition will start. The code below animates a box but it starts after 0.5s.

.box {
  transform: translate(0, 0);
  transition: 0.4s transform ease-out;
}
.box:hover {
  transform: translate(20px, 0);
  transition-delay: 0.5s;
}

Below is a little demonstration of how transition-delay property works. Try dragging the hourglass icon at different time to see the effect of transition-delay.

.red {
  transition-delay: 0s;
}
.blue {
  transition-delay: 1s;
}
.yellow {
  transition-delay: 2s;
}

In our checkbox interaction, on checked, the box undergoes animation, and the line is delayed to give the appearance of extending from the box. When the checkbox is unchecked, this sequence is reversed: first, the line is animated, and then, after a certain delay, the box undergoes its animation.

              
.box-icon {
  transition-delay: 0.2s;
}
.box-icon {
  transition-delay: 0s;
}
.line {
  transition-delay: 0s
}
              
            

These are the two main ideas on which the interaction has been built. If you want to check all the styling details check out the repo

Thanks for reading!