我按照教程设法在这里创建了这个动画复选标记 https://codepen.io/flaccuz/pen/MWaPmgg
#my-icon .circle {
animation: circle-animation 0.5s ease-out forwards;
opacity: 0;
transform: scale(0.9);
transform-origin: center;
}
@keyframes circle-animation {
100% {
opacity: 1;
transform: scale(1);
}
}
#my-icon .checkmark {
animation: checkmark-animation 1s ease-out forwards;
stroke-dasharray: 400;
stroke-dashoffset: 400;
stroke: #cfd8dc;
transform-origin: center;
}
@keyframes checkmark-animation {
40% {
transform: scale(1);
}
55% {
stroke: #cfd8dc;
transform: scale(1.2);
}
70% {
transform: scale(1);
}
100% {
stroke-dashoffset: 0;
transform: scale(1);
stroke: #21b587;
}
}
但是，当我调整复选标记的大小并在背景中添加插图时，动画的样式发生了变化 - 复选标记不再自行绘制，它只是上下跳跃，如下所示：https://codepen.io/flaccuz/pen/MWaPmYg
知道这是为什么吗？我根本没有更改 CSS 中的任何内容。
您需要将transform-origin: center;替换为transform-origin: 100.99px 106.52px;其中100.99px 106.52px;是圆心。此外，<polyline class="checkmark"的长度是 16.97 而不是 400。在 css 中使用此值。
为了知道路径的长度，您可以使用Javascript中的getTotalLength方法。
svg{border:solid}
#my-icon .circle {
animation: circle-animation .5s ease-out forwards;
opacity: 0;
transform: scale(0.9);
transform-origin: 100.99px 106.52px;
}
@keyframes circle-animation {
100% {
opacity: 1;
transform: scale(1);
}
}
#myicon .checkmark {
animation: checkmark-animation 1s ease-out forwards;
stroke-dasharray: 16.97;
stroke-dashoffset: 16.97;
stroke: #cfd8dc;
transform-origin: 100.99px 106.52px;
}
@keyframes checkmark-animation {
40% {
transform: scale(1);
}
55% {
stroke: #cfd8dc;
transform: scale(1.2);
}
70% {
transform: scale(1);
}
100% {
stroke-dashoffset: 0;
transform: scale(1);
stroke: #21b587;
}
}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128.78 126.7" width="200">
<g id="background">
<g>
<path d="M64.92,23.92A56.07,56.07,0,0,0,15.4,106.4h99a55.65,55.65,0,0,0,4.66-11.76A56.13,56.13,0,0,0,64.92,23.92Z" style="fill: #f6f8f6"/>
<g>
<circle cx="64.94" cy="21.42" r="16.52" style="fill: #fff"/>
<path d="M64.94,5.27A16.15,16.15,0,1,1,48.8,21.42,16.15,16.15,0,0,1,64.94,5.27m0-.75a16.9,16.9,0,1,0,16.9,16.9,16.92,16.92,0,0,0-16.9-16.9Z"/>
</g>
<line x1="35.47" y1="106.4" x2="114.37" y2="106.4" style="fill: none;stroke: #2c2c2d;stroke-linecap: round;stroke-miterlimit: 10"/>
<line x1="15.21" y1="106.4" x2="44.47" y2="106.4" style="fill: none;stroke: #2c2c2d;stroke-linecap: round;stroke-miterlimit: 10"/>
<line x1="6" y1="106.4" x2="11.12" y2="106.4" style="fill: none;stroke: #2c2c2d;stroke-linecap: round;stroke-miterlimit: 10"/>
<g>
<path d="M64.94,33.19A11.78,11.78,0,1,1,76.72,21.42,11.78,11.78,0,0,1,64.94,33.19Z" style="fill: #ff5454"/>
<path d="M64.94,10a11.41,11.41,0,1,1-11.4,11.41A11.41,11.41,0,0,1,64.94,10m0-.75A12.16,12.16,0,1,0,77.1,21.42,12.17,12.17,0,0,0,64.94,9.26Z"/>
</g>
<g>
<path d="M60.78,28.76a1.18,1.18,0,0,1-.93-1.89A6,6,0,0,0,61.26,24H60.17a1.17,1.17,0,0,1,0-2.34h.91c-.1-.47-.23-1-.38-1.54l-.11-.44c-.89-3.47.74-5.52,2.56-6.28A5.16,5.16,0,0,1,65.21,13,5.57,5.57,0,0,1,70,15.58a1.18,1.18,0,0,1-.4,1.61,1.16,1.16,0,0,1-.6.17,1.18,1.18,0,0,1-1-.56,3.22,3.22,0,0,0-2.76-1.49,2.83,2.83,0,0,0-1.14.22c-1.23.51-1.65,1.77-1.2,3.54l.11.44c.19.74.37,1.44.5,2.12h4a1.17,1.17,0,1,1,0,2.34H63.62a6.49,6.49,0,0,1-.71,2.44h6.77a1.18,1.18,0,0,1,0,2.35Z" style="fill: #fff"/>
<path d="M65.21,13.33a5.22,5.22,0,0,1,4.44,2.45.81.81,0,0,1-.27,1.09A.78.78,0,0,1,69,17a.81.81,0,0,1-.69-.39,3.57,3.57,0,0,0-3.08-1.66,3.32,3.32,0,0,0-1.28.24c-1.4.59-1.92,2-1.42,4l.11.43c.22.87.42,1.65.54,2.4h4.29a.8.8,0,0,1,0,1.6H63.27a6.72,6.72,0,0,1-1,3.19h7.39a.8.8,0,0,1,0,1.59h-8.9a.8.8,0,0,1-.63-1.28,6,6,0,0,0,1.52-3.5h-1.5a.8.8,0,0,1,0-1.6h1.37c-.11-.59-.28-1.24-.47-2L61,19.56c-.82-3.24.67-5.14,2.35-5.85a4.86,4.86,0,0,1,1.91-.38m0-.75v0A5.65,5.65,0,0,0,63,13c-1.88.79-3.73,3-2.78,6.72l.11.45c.1.38.19.73.27,1.06h-.44a1.55,1.55,0,0,0,0,3.1h.64a6.58,6.58,0,0,1-1.25,2.29,1.54,1.54,0,0,0,1.22,2.49h8.9a1.55,1.55,0,0,0,0-3.09H63.49A6.54,6.54,0,0,0,64,24.35h3.49a1.55,1.55,0,0,0,0-3.1H63.78q-.2-.88-.45-1.83L63.22,19c-.23-.91-.41-2.52,1-3.11a2.61,2.61,0,0,1,1-.18A2.85,2.85,0,0,1,67.64,17a1.57,1.57,0,0,0,1.33.75,1.52,1.52,0,0,0,.8-.23,1.54,1.54,0,0,0,.52-2.12,6,6,0,0,0-5.08-2.81Z"/>
</g>
<path d="M74.77,57.2s6.83,1.43,10.83-2.44S88.37,44,88.37,44s-6.83-1.43-10.82,2.44S74.77,57.2,74.77,57.2Z" style="fill: #a5db85;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<path d="M57.45,51.3S58.87,44.47,55,40.48s-10.75-2.75-10.75-2.75-1.41,6.84,2.46,10.82S57.45,51.3,57.45,51.3Z" style="fill: #a5db85;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<line x1="64.92" y1="72.52" x2="64.92" y2="38.01" style="fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<line x1="65.24" y1="59.02" x2="69.85" y2="63.5" style="fill: none"/>
<line x1="57.45" y1="51.3" x2="64.92" y2="58.56" style="fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<line x1="74.77" y1="57.2" x2="64.92" y2="66.45" style="fill: none;stroke: #000;stroke-linecap: round;stroke-linejoin: round;stroke-width: 0.75px"/>
<g>
<path d="M51.72,105.68a1.71,1.71,0,0,1-1.67-1.33l-4.7-20.21A1.71,1.71,0,0,1,47,82h35.8a1.7,1.7,0,0,1,1.35.65,1.73,1.73,0,0,1,.33,1.46l-4.66,20.21a1.71,1.71,0,0,1-1.68,1.33Z" style="fill: #00aff5"/>
<path d="M82.82,82.4a1.34,1.34,0,0,1,1.31,1.65l-4.66,20.21a1.35,1.35,0,0,1-1.31,1H51.72a1.36,1.36,0,0,1-1.31-1l-4.7-20.21A1.35,1.35,0,0,1,47,82.4h35.8m0-.75H47a2.1,2.1,0,0,0-2,2.57l4.7,20.21a2.09,2.09,0,0,0,2,1.63H78.16a2.09,2.09,0,0,0,2-1.63l4.66-20.21a2.09,2.09,0,0,0-2-2.57Z" style="fill: #111"/>
</g>
<g>
<rect x="39.79" y="72.14" width="50.3" height="11.64" rx="1.89" style="fill: #00aff5"/>
<path d="M88.21,72.52A1.52,1.52,0,0,1,89.72,74v7.86a1.51,1.51,0,0,1-1.51,1.51H41.68a1.5,1.5,0,0,1-1.51-1.51V74a1.51,1.51,0,0,1,1.51-1.51H88.21m0-.75H41.68A2.26,2.26,0,0,0,39.42,74v7.86a2.26,2.26,0,0,0,2.26,2.26H88.21a2.26,2.26,0,0,0,2.26-2.26V74a2.26,2.26,0,0,0-2.26-2.26Z" style="fill: #111"/>
</g>
</g>
</g>
<g id="myicon">
<circle class="circle" cx="100.99" cy="106.52" r="14" style="fill: #fff;stroke: #e4f4da;stroke-miterlimit: 10;stroke-width: 2px"/>
<polyline class="checkmark" points="94.99 106.52 98.99 110.52 106.99 102.52" style="fill: none;stroke: #a5db85;stroke-linecap: round;stroke-linejoin: round;stroke-width: 2px"/>
</g>
</svg>