从左下到右上画一个勾号的CSS动画

Question

我想用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>

我非常感谢在正确实现这个动画方面能够提供帮助！另外，既然我已经在使用jQuery，如果可以更高效地用jQuery / JavaScript完成这项工作，那也没问题。

- wordSmith

Answer 1

这是我使用<canvas>和JavaScript的方法。

Fiddle演示 -----> 正方形边角 | 圆角边角

(注意: 要改变动画速度，请增加或减少变量animationSpeed。较小的数字会产生更高的速度)

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>

---

您也可以使用 svg 和 CSS animation 来完成这个操作。

1. 方形边角:

#check {
  fill: none;
  stroke: green;
  stroke-width: 20;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  -webkit-animation: draw 2s infinite ease;
  animation: draw 2s infinite ease;
}
-webkit-@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="150" height="150">
  <path id="check" d="M10,30 l30,50 l95,-70" />
</svg>

---

2. 圆角处理：

#check {
  fill: none;
  stroke: green;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: draw 2s infinite ease;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="150" height="150">
  <path id="check" d="M10,50 l25,40 l95,-70" />
</svg>

- Weafs.py

---

如何使动画绘制一次后停留在屏幕上？针对SVG示例@chipChocolate.py - PhoonOne

@JennyC 不好意思，我错过了那个问题，@Jonathan 是正确的，请从 animation 和 -webkit-animation 中删除 infinite。 - Weafs.py

非常符合我的需求，易于实现，谢谢！ - Lukas

这在Firefox和Chrome中运行得很好，但在IE9中不起作用。你有没有针对IE的解决方法？ - Master.Deep

@Master.Deep，你需要将animation-play-state属性设置为“forward”，以使其停留在屏幕上：animation和-webkit-animation应该设置为draw 2s ease forwards。 - Michiel

Answer 2

我想要一个看起来像done图标的勾选框，因此我在原始答案上做了一些修改。我把它发布在这里，以便能够节省其他人的时间。

.animated-check {
  height: 10em;
  width: 10em;
}

.animated-check path {
  fill: none;
  stroke: #7ac142;
  stroke-width: 4;
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  animation: draw 1s linear forwards;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<svg class="animated-check" viewBox="0 0 24 24">
  <path d="M4.1 12.7L9 17.6 20.3 6.3" fill="none"/>
</svg>

- jdnz