Нарисуйте галочку с помощью CSS-анимации слева направо вверх

Я пытаюсь нарисовать галочку слева, идущую вниз вправо, с помощью анимации CSS. Я ушел с левой стороны, но возвращение назад, похоже, не работает. Это идет справа вниз. Кто-нибудь знает, как я могу сделать эту гладкость и на самом деле выглядеть как чек?

setTimeout(function() {
  $('#kick').addClass('draw2');
}, 500);
#kick {
  height: 150px;
  width: 20px;
  background: green;
  -webkit-transform: rotate(45deg);
  position: relative;
  top: -24px;
  left: 273px;
}
#stem {
  height: 60px;
  width: 20px;
  background: green;
  -webkit-transform: rotate(-45deg);
  position: relative;
  top: 100px;
  left: 200px;
}
@-webkit-keyframes draw1 {
  from {
    height: 0;
  }
  to {
    height: 60px
  }
}
@-webkit-keyframes draw2 {
  from {
    height: 0;
  }
  to {
    height: 150px;
  }
}
.draw1 {
  -webkit-animation-name: draw1;
  -webkit-animation-duration: 0.5s;
}
.draw2 {
  -webkit-animation-name: draw2;
  -webkit-animation-duration: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="checkmark">
    <div class="draw1" id="stem"></div>
    <div id="kick"></div>
</span>

Ответы

Ответ 1

Ну, это мой подход с использованием <canvas> и JavaScript.

Демо на скрипке ----- > Квадратные уголки | Круглые углы

( Примечание: Чтобы изменить скорость анимации или уменьшить ее значение animationSpeed. Нижнее число yeilds Более высокая скорость)

var start = 100;
var mid = 145;
var end = 250;
var width = 20;
var leftX = start;
var leftY = start;
var rightX = mid - (width / 2.7);
var rightY = mid + (width / 2.7);
var animationSpeed = 20;

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
ctx.lineWidth = width;
ctx.strokeStyle = 'rgba(0, 150, 0, 1)';

for (i = start; i < mid; i++) {
  var drawLeft = window.setTimeout(function() {
    ctx.beginPath();
    ctx.moveTo(start, start);
    ctx.lineTo(leftX, leftY);
    ctx.stroke();
    leftX++;
    leftY++;
  }, 1 + (i * animationSpeed) / 3);
}

for (i = mid; i < end; i++) {
  var drawRight = window.setTimeout(function() {
    ctx.beginPath();
    ctx.moveTo(leftX, leftY);
    ctx.lineTo(rightX, rightY);
    ctx.stroke();
    rightX++;
    rightY--;
  }, 1 + (i * animationSpeed) / 3);
}
<canvas height="160"></canvas>