CSSでチェックマークアニメーション

実際に動作を確認したい人向け
https://jsfiddle.net/junya_5102/5fc64qrn/

html

<input type="checkbox" id="check1">
<label class="check_label" for="check1"><span class="check_mark green"></span>label</label>

CSS

#check1{
  display: none;
}

.check_label{
  position: relative;

  display: inline-block;
  font-size: 32px;
  padding-left: 1.35em;
}

.check_label .check_mark{
  position: absolute;
  top: 50%; left: 0;

  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  border: 1px solid black;
  box-sizing: border-box;

  transform: translateY(-50%);
}

.check_mark:before{
  content: '';
  position: absolute;
  bottom: 25%; left: 50%;

  font-size: 0;
  width: .25em;
  height: .5em;
  background-color: currentColor;

  transform-origin: center bottom;
  transform:  translateX(-50%) scaleX(-1) rotate(-135deg) translateY(.5em); 
}


.check_mark:after{
  content: '';
  position: absolute;
  bottom: 25%; left: 50%;

  font-size: 0;
  width: .25em;
  height: .94em;
  background-color: currentColor;

  transform-origin: center bottom;
  transform: translateX(-50%) rotate(45deg) translate(.05em,.125em);
}

.green{
  color: green;
}

#check1:checked + .check_label .check_mark:before{
  font-size: 1em;
  animation: check_anim .1s linear both;
}
#check1:checked + .check_label .check_mark:after{
  font-size: 1em;
  animation: check_anim .1s .1s linear both;
}


@keyframes check_anim{
  from{
    height: 0;
  }
}

.check_labelのfont-sizeを変えればチェックマークのサイズも変わります

.check_mark(span)の:before,:afterでチェックマークを作っています。
:before,:afterのheightでチェックマークの棒の長さ,widthが太さとなっています。

label内にinput要素がある場合

<label class="check_label">
  <input type="checkbox" id="check1">
  <span class="check_mark green"></span>
  label
</label>

要素の指定方法を変える。

#check1:checked + .check_mark:before{
  font-size: 1em;
  animation: check_anim .1s linear both;
}
#check1:checked + .check_mark:after{
  font-size: 1em;
  animation: check_anim .1s .1s linear both;
}

対応ブラウザ

Google Chrome , Safari , Firefox

※いずれも最新版で検証