如何创建动画 Stackoverflow 图标

Question 1

下面是 EnSO 和 RuSO 图标的图像：

EnSO 图标代码

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120">
<style>.st0{fill:#bcbbbb}.st1{fill:#f48023}
</style>
<path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/><path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/>
</svg>

动画脚本：

篮子外形图
轮廓颜色填充
5条彩色条纹依次出现
条纹以相反的顺序消失。
循环出现，彩色条纹消失。

如何使用问题标签中指示的技术之一来实现此图标动画脚本？

恭喜 UModel 竞赛获胜者

和塞瓦斯托波尔复选标记的所有者

作为最准确完成竞赛任务所有分数的作品的作者

Question 2

let s = c.width, // размер иконки
  w = s / 2.3, // ширина блока
  h = s / 13, // высота блока
  start = Date.now(), // время старта
  fall = 900, // продолжительность падения одного блока
  spring = 150, // продолжительность эффекта пружины
  jump = 2000, // продолжительность "прыжка" в конце
  jumpDelay = 2700, // задержка срабатываня прыжка 
  delay = i => i * (600 - i * 50), // задержка между падениями
  clamp = (v, t) => Math.min(1, Math.max(0, v) / t), // приведение к интервалу 0 - 1
  ctx = c.getContext("2d");

function draw() {
  let time = Date.now() - start; // timestamp кадра
  ctx.clearRect(0, 0, s, s); // очистка
  ctx.fillStyle = "white"; // цвет блоков и корзины

  // блоки  
  [0, 1, 2, 3, 4].forEach(block => {

    // падение
    let t = clamp(time - delay(block), fall); // интервал времени падения
    let y = s * (t * t * t * 1.5 - 1.65 - .1 * block); // сглаживание y = t^3

    // эффект пружины
    for (let i = 0; i < 5; i++) { // столько раз сколько блоков
      t = clamp(time - fall - delay(i), spring) - .6; // время срабатывания
      y += (1 - t * t) * s * .09; // сглаживание y = 1 - t^2
    }

    // подпрыгивание 
    t = clamp(time - jumpDelay, jump); // время срабатывания
    // веселая функция сглаживания "elastic"
    t = Math.pow(2, -10 * t) * Math.sin((t - .4 / 4) * (2 * Math.PI) / .4) + 1;
    let r = t * block * .075 * Math.PI; // угол для каждого блока
    let x = s * .6 - Math.cos(r) * s * .6; // положение по х
    y -= Math.sin(r) * s * .6 - s * .1 * block * t; // положение по y

    // отрисовка
    ctx.save();
    ctx.translate(s / 2 + x, s / 2 + y);
    ctx.rotate(r);
    ctx.fillRect(-w / 2, -h / 2, w, h);
    ctx.restore();
  });

  // корзина
  let y = s * 0.14;
  [
    [-w / 2 - h * 2, y, h, s * 0.25],
    [w / 2 + h, y, h, s * 0.25],
    [-w / 2 - h * 2, y + s * 0.2, w + h * 4, h]
  ]
  .forEach(r => ctx.fillRect(s / 2 + r[0], s / 2 + r[1], r[2], r[3]));

  requestAnimationFrame(draw);
}

addEventListener('click', () => start = Date.now());
draw();

<canvas id=c width=175 height=175 style='background:steelblue'><canvas>

Question 3

仅 CSS...

好吧，一点点 HTML））由于拒绝其他技术，样式表变得很友好。

* { margin: 0; padding: 0; } body { background: url("https://isstatic.askoverflow.dev/m9NKc.png") 0% 0% no-repeat #eee; height: 100vh; display: flex; flex-flow: row nowrap; justify-content: space-around; justify-content: space-evenly; align-items: center; }

:root { --spd_stroke: 0.8s; --spd_fill: 1s; --color: rgba(188, 187, 187, 1); }

/* Кнопка запуска и контейнер */
input[type="radio"] { width: 50px; height: 50px; transition: opacity 2s ease; }
input[type="radio"]:checked { opacity: 0; }
input[type="radio"]:checked + div { display: block; }

.so-icon {
  display: none;
  position: absolute;
  font-size: 165px;
  line-height: 1em;
  width: 1em;
  height: 1em;
}

/* Внутренняя часть лотка */
.basket-sup {
  position: absolute;
  bottom: 0.065em; left: 50%;
  transform: translatex(-50%);
  height: 0; width: 0;
  box-sizing: border-box;
  border: 0.02em solid var(--color);
  border-top: none;
  background-color: rgba(0, 128, 0, 0);
  animation: basket-sup calc(var(--spd_stroke) * 2) linear forwards;
}
@keyframes basket-sup {
  55% { height: 0; width: 0.66em; }
  100% { height: 0.285em; width: 0.66em; }
}

/* Боковые части лотка */
.basket-sup::before,
.basket-sup::after {
  content: "";
  position: absolute;
  top: 0;
  height: 0; width: 0;
  box-sizing: border-box;
  border: none;
  border-top: 0.02em solid var(--color);
  background-color: rgba(0, 128, 0, 0);
}
.basket-sup::before {
  left: 0.001em;
  margin-left: -0.02em;
  border-left: 0.02em solid var(--color);
  animation: basket-sup-before calc(var(--spd_stroke) * 1.6) linear calc(var(--spd_stroke) * 2) forwards, basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
@keyframes basket-sup-before {
  25% { height: 0; width: 0.075em; margin-left: -0.094em; }
  100% { height: 0.35em; width: 0.075em; margin-left: -0.094em; }
}
.basket-sup::after {
  right: 0.001em;
  margin-right: -0.02em;
  border-right: 0.02em solid var(--color);
  animation: basket-sup-after calc(var(--spd_stroke) * 1.6) linear calc(var(--spd_stroke) * 2) forwards, basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
@keyframes basket-sup-after {
  25% { height: 0;  width: 0.075em; margin-right: -0.094em; }
  100% { height: 0.35em; width: 0.075em; margin-right: -0.094em; }
}

/* Нижняя часть лотка */
.basket-sub {
  position: absolute;
  bottom: 0.02em; left: 50%;
  transform: translatex(-50%);
  height: 0.046em; width: 0.66em;
  border: none;
  animation: basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
.basket-sub::before,
.basket-sub::after {
  content: "";
  position: absolute;
  bottom: -0.02em;
  height: 0; width: 0;
  border: none;
  border-bottom: 0.02em solid var(--color);
  animation: basket-sub calc(var(--spd_stroke) * 1.2) linear calc(var(--spd_stroke) * 3.6) forwards, basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
.basket-sub::before {  left: -0.054em; }
.basket-sub::after { right: -0.054em; }

@keyframes basket-sub {
  100% { width: 0.39em; }
}
@keyframes basket-fill {
  0% { background-color: rgba(188, 187, 187, 0); }
  20% { background-color: rgba(188, 187, 187, 0.5); }
  30% { background-color: rgba(255, 255, 255, 1); }
  100% { background-color: rgba(188, 187, 187, 1) }
}

/* Листы */
div.lists-wrap {
  position: relative;
  display: block;
  height: 1em; width: 1.3em;
}

div.lists-wrap span {
  position: absolute;
  display: block;
  height: 72px; width: 14px;
  transform-origin: 50% 100%;
  animation: list-show 1s linear forwards, list-rotate 1.5s cubic-bezier(1, 0, 0.45, 0.7) infinite alternate;
}
.lists-wrap span:nth-child(1) {
  top: 55px; left: 109px;
  transform: rotate(-90deg);
  animation-delay: 5s, 6.0s;
}
.lists-wrap span:nth-child(2) {
  top: 37px; left: 111px;
  transform: rotate(-78deg);
  animation-delay: 5.1s, 6.1s;
}
.lists-wrap span:nth-child(3) {
  top: 19px; left: 117px;
  transform: rotate(-65deg);
  animation-delay: 5.2s, 6.2s;
}
.lists-wrap span:nth-child(4) {
  top: 2px; left: 126px;
  transform: rotate(-50deg);
  animation-delay: 5.3s, 6.3s;
}
.lists-wrap span:nth-child(5) {
  top: -11px; left: 140px;
  transform: rotate(-37deg);
  animation-delay: 5.4s, 6.4s;
}
@keyframes list-show {
  0% { box-shadow: inset 0 0 8px -1px #f4802400, 0 0 8px -1px #f4802400; }
  20% { box-shadow: inset 0 0 12px -1px #f48024ff, 0 0 12px -1px #f48024ff; }
  30% { box-shadow: inset 0 0 9px -1px #ffffffff, 0 0 16px -1px #f48024ff; }
  100% { box-shadow: inset 0 0 7px 7px #f48024ff, 0 0 8px -1px #ffffff00; }
}
@keyframes list-rotate {
  100% { height: 0px; }
}

<input type="radio">
<div class="so-icon">
  <div class="basket-sup"></div>
  <div class="basket-sub"></div>
  <div class='lists-wrap'>
    <span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

Question 4

SVG 解决方案

首先，我将开始实现问题中脚本从3到5的图标动画

外貌 opacity:1
消失的彩色条纹图标opacity:0
然后在一个循环结束后，重复该过程。

有关两条条纹动画示例的更多详细信息

最初，所有条纹都是隐藏的。

每个条纹都有两个动画：
一个动画显示条纹，第二个动画使条纹不可见。

<path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
               <!-- 3. Анимация появления первой цветной полоски -->
           <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back5.end+1.5s" fill="freeze" />  
                <!-- 4. Анимация исчезновения первой цветной полоски -->
             <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" />
        </path>

首先，有显示条纹的动画的顺序枚举。

例如，显示第二个片段的动画的id="an2"启动将在显示第一个片段的动画结束后开始，并id="an1"有一些延迟 begin="an1.end+0.5s"

然后依次启动隐藏条纹的动画。

第二条被隐藏（）它的动画将在同一条的显示动画（） id="Back2"结束后开始id="an2"

begin="an2.end+0.5s"

接下来，隐藏第一条。

通过重新开始显示第一条的动画来重复连续显示和隐藏动画的完整循环。

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 10 120 120" style="border:1px solid;">
  <style>
    .st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
	.st1{fill:#f48023;opacity:0;}
	.st2{fill:#BCBBBB;}

  </style>
  <path class="st2"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"> 
       
  </path>   
   
  
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	     <!--  Анимация появления первой цветной полосы -->
		   <!--  Первый запуск анимации по клику мышки и повторный запуск после окончания цикла `begin="svg1.click;Back2.end+1.5s"` -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back2.end+1.5s" fill="freeze" restart="whenNotActive" /> 
	   
	   <!--  Анимация исчезновения первой цветной полосы-->
	     <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.5s" fill="freeze" restart="whenNotActive" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >

         <!--  Анимация появления второй цветной полосы -->
	   <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.5s"
     	   fill="freeze" restart="whenNotActive" />  
		
		<!--  Анимация исчезновения второй цветной полосы -->
	     <animate id="Back2" attributeName="opacity" to="0" dur="0.001s"
    		 begin="an2.end+0.5s"  fill="freeze" restart="whenNotActive" />
  </path>	  
    
    <text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>  
</svg>

全套条纹图标的示例动画

点击蓝色方块

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120" style="border:1px solid;">
  <style>
    .st0{fill:white;}
	.st1{fill:white;opacity:0;}

  </style>
    <rect width="100%" height="100%" fill="#005999" />
  <path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z">
  
  </path>   
   
     
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	       <!-- 3. Анимация появления первой цветной полоски -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back5.end+1.5s" fill="freeze" />  
	        <!-- 4. Анимация исчезновения первой цветной полоски -->
	     <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >
      <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" /> 
	     <animate id="Back2" attributeName="opacity" to="0" dur="0.001s" begin="Back3.end+0.125s" fill="freeze" />
  </path>	  
    <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" >
       <animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s" fill="freeze" />
	     <animate id="Back3" attributeName="opacity" to="0" dur="0.001s" begin="Back4.end+0.125s" fill="freeze" />
  </path>	
	
  <path class="st1"  d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" >
      <animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" />
	    <animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" />
  </path>
  
  <path class="st1"  d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" >
     <animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" /> 
	   <animate id="Back5" attributeName="opacity" dur="0.001s" to="0"  begin="an5.end+1s" fill="freeze" />
  </path>	   
</svg>

购物车图标的动画

基于变化参数绘制轮廓stroke-dasharray
将轮廓从背景颜色填充到篮子图标的颜色

<path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!--1. Анимация рисования контура корзины -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />  
         <!-- 2. Заполнение цветом корзины -->
       <animate id="bask_fill"  attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
  </path>

下面是 EnSO 图标的完整代码

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 12 120 120" style="border:1px solid;">
  <style>
    .st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
	.st1{fill:#f48023;opacity:0;}

  </style>
  <path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!--1. Анимация рисования контура корзины -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />  
	     <!-- 2. Заполнение цветом корзины -->
	   <animate id="bask_fill"  attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
  </path>   
   
  
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	     <!-- 3. Анимация появления первой цветной полоски -->
		   <!-- 5. Зацикливание появления, исчезновения полосок `begin="bask_fill.end;Back5.end+1.5s` -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="bask_fill.end;Back5.end+1.5s" fill="freeze" /> 
	        <!-- 4. Анимация исчезновения первой цветной полоски -->
	     <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >
         <!-- 3. Анимация появления второй цветной полоски -->
	   <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" />     <!-- 4. Анимация исчезновения второй цветной полоски -->
	     <animate id="Back2" attributeName="opacity" to="0" dur="0.001s" begin="Back3.end+0.125s" fill="freeze" />
  </path>	  
    <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" >
       <animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s" fill="freeze" />
	     <animate id="Back3" attributeName="opacity" to="0" dur="0.001s" begin="Back4.end+0.125s" fill="freeze" />
  </path>	
	
  <path class="st1"  d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" >
      <animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" />
	    <animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" />
  </path>
  
  <path class="st1"  d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" >
     <animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" /> 
	   <animate id="Back5" attributeName="opacity" dur="0.001s" to="0"  begin="an5.end+1s" fill="freeze" />
  </path>	   
    <text x="32" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>  
</svg>

以下是 RuSO 图标的完整代码

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 12 120 120" style="border:1px solid;">
  <style>
    .st0{fill:#005999; stroke:white; stroke-width:2;}
	.st1{fill:white;opacity:0;}

  </style> 
    <rect width="100%" height="100%" fill="#005999" />
  <path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!--1. Анимация рисования контура корзины -->
     <animate id="bask"
       attributename="stroke-dasharray"
       dur="4s"
       begin="svg1.click"
       values="0,123.5 0,123.5;0,0,247,0"
       fill="freeze" />  
	     <!-- 2. Заполнение цветом корзины -->
	   <animate id="bask_fill"
        attributename="fill"
        dur="1s"
        begin="bask.end"
        values="#005999;white"
        fill="freeze" />
  </path>   
   
  
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	     <!-- 3. Анимация появления первой цветной полоски -->
		   <!-- 5. Зацикливание появления, исчезновения полосок `begin="bask_fill.end;Back5.end+1.5s` -->
	   <animate id="an1"
       attributeName="opacity"
       to="1"
       dur="0.001s"
       begin="bask_fill.end;Back5.end+1.5s"
       fill="freeze" /> 
	        <!-- 4. Анимация исчезновения первой цветной полоски -->
	     <animate id="Back1"
       attributeName="opacity" to="0"
       dur="0.001s"
       begin="Back2.end+0.125s"
       fill="freeze" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >
         <!-- 3. Анимация появления второй цветной полоски -->
	   <animate id="an2"
       attributeName="opacity" to="1"
       dur="0.001s"
       begin="an1.end+0.125s"
       fill="freeze" />     <!-- 4. Анимация исчезновения второй цветной полоски -->
	     <animate id="Back2"
       attributeName="opacity" to="0"
       dur="0.001s"
       begin="Back3.end+0.125s"
       fill="freeze" />
  </path>	  
    <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" >
       <animate id="an3"
         attributeName="opacity" to="1"
         dur="0.001s"
         begin="an2.end+0.125s"
         fill="freeze" />
	     <animate id="Back3"
          attributeName="opacity" to="0"
          dur="0.001s"
          begin="Back4.end+0.125s"
          fill="freeze" />
  </path>	
	
  <path class="st1"  d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" >
      <animate id="an4"
        attributeName="opacity" to="1"
        dur="0.001s"
        begin="an3.end+0.125s"
        fill="freeze" />
	    <animate id="Back4"
        attributeName="opacity" to="0"
        dur="0.001s"
        begin="Back5.end+0.125s"
        fill="freeze" />
  </path>
  
  <path class="st1"  d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" >
     <animate id="an5"
        attributeName="opacity"
        dur="0.001s"
        to="1"
        begin="an4.end+0.125s"
        fill="freeze" /> 
	   <animate id="Back5"
        attributeName="opacity"
        dur="0.001s"
        to="0"
        begin="an5.end+1s"
        fill="freeze" />
  </path>	   
   <text x="30" y="130" font-size="14px" fill="#005999" >Click me</text> 
</svg>

Question 5

CSS + jQuery 解决方案

选项一

function basket() {
$(".button").prop("disabled", true);
  $(".basket").css('border-width', '1px').animate({
    width: '140px',
    left: '50px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__height();
  }, 500);
}

function basket__child__1__height() {
  $(".basket").css('height', '20px');
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").css('border-width', '1px').animate({
    height: '60px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__width();
  }, 500);
}

function basket__child__1__width() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    width: '20px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__height();
  }, 500);
}

function basket__child__3__height() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").css('border-width', '1px').css('width', '1px').animate({
    height: '41px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__width();
  }, 500);
}

function basket__child__3__width() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    width: '50px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__background();
  }, 500);
}

function basket__background() {
  $(".basket>span:nth-child(5) , .basket>span:nth-child(1) , .basket>span:nth-child(2)").addClass('basket__span__background');
  setTimeout(function() {
    line__child__1();
  }, 2000);
}

function line__child__1() {
  $(".line>span:nth-child(1)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__2();
  }, 200);
}

function line__child__2() {
  $(".line>span:nth-child(2)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__3();
  }, 200);
}

function line__child__3() {
  $(".line>span:nth-child(3)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__4();
  }, 200);
}

function line__child__4() {
  $(".line>span:nth-child(4)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__5();
  }, 200);
}

function line__child__5() {
  $(".line>span:nth-child(5)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__5__back();
  }, 500);
}

function line__child__5__back() {
  $(".line>span:nth-child(5)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__4__back();
  }, 200);
}

function line__child__4__back() {
  $(".line>span:nth-child(4)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__3__back();
  }, 200);
}

function line__child__3__back() {
  $(".line>span:nth-child(3)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__2__back();
  }, 200);
}

function line__child__2__back() {
  $(".line>span:nth-child(2)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__1__back();
  }, 200);
}

function line__child__1__back() {
  $(".line>span:nth-child(1)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    basket__background__back();
  }, 200);
}

function basket__background__back() {
  $(".basket>span:nth-child(5) , .basket>span:nth-child(1) , .basket>span:nth-child(2)").removeClass('basket__span__background');
  setTimeout(function() {
    basket__child__3__width__back();
  }, 2000);
}

function basket__child__3__width__back() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    width: '1px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__height__back();
  }, 500);
}

function basket__child__3__height__back() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    height: '0px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__height__back__css();
  }, 500);
}

function basket__child__3__height__back__css() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").css('width', '0px').css('border-width', '0px');
  setTimeout(function() {
    basket__child__1__width__back();
  }, 1);
}

function basket__child__1__width__back() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    width: '0px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__height__back();
  }, 500);
}

function basket__child__1__height__back() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    height: '0px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__height__back__css();
  }, 500);
}

function basket__child__1__height__back__css() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").css('border-width', '0px');
  $(".basket").css('height', '0px');
  setTimeout(function() {
    basket__back();
  }, 1);
}

function basket__back() {
  $(".basket").animate({
    width: '0px',
    left: '120px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__back__css();
  }, 500);
}

function basket__back__css() {
  $(".basket").css('border-width', '0px');
  setTimeout(function() {
    basket();
  }, 2000);
}
$(".button").on('click', function() {
  function func() {
    setTimeout(function() {
      basket();
    }, 100);
  }
  func();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fafafb;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(188, 187, 187, 1);
}

.basket {
  position: absolute;
  bottom: 50px;
  /*left: 50px;*/
  left: 120px;
  /*width: 140px;*/
  width: 0px;
  /*height: 20px;*/
  height: 0px;
  /*background: rgba(188,187,187,1);*/
  /*background: transparent;*/
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
  transition: background 2s ease-out 0s;
}

.basket>span:nth-child(1),
.basket>span:nth-child(2) {
  display: block;
  position: absolute;
  bottom: 0px;
  /*height: 60px;*/
  height: 0px;
  /*width: 20px;*/
  width: 0px;
  /*background: rgba(188,187,187,1);*/
  border-top: 1px solid rgba(188, 187, 187, 1);
  transition: background 2s ease-in-out 0s;
}

.basket>span:nth-child(1) {
  left: 0px;
  border-left: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(2) {
  right: 0px;
  border-right: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(5) {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 19px;
  /*background: rgba(188,187,187,1);*/
  transition: background 2s ease-in-out 0s;
}

.basket__span__background {
  background: rgba(188, 187, 187, 1);
  animation-name: background;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}

@keyframes background {
  50% {
    background: rgba(51, 51, 51, 1);
  }
  100% {
    background: rgba(188, 187, 187, 1);
  }
}

.basket>span:nth-child(3),
.basket>span:nth-child(4) {
  display: block;
  position: absolute;
  top: -41px;
  /*width: 50px;*/
  width: 0px;
  /*height: 41px;*/
  height: 0px;
}

.basket>span:nth-child(3) {
  left: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-left: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.basket>span:nth-child(4) {
  right: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-right: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.line {
  position: absolute;
  bottom: 80px;
  right: 79px;
  width: 78px;
  height: 15px;
}

.line>span:nth-child(1),
.line>span:nth-child(2),
.line>span:nth-child(3),
.line>span:nth-child(4),
.line>span:nth-child(5) {
  display: block;
  position: absolute;
  bottom: 0px;
  right: -5px;
  width: 79px;
  /*width: 0px;*/
  /*height: 15px;*/
  height: 0px;
  background-color: rgba(244, 128, 36, 1);
  border: 0px solid rgba(244, 128, 36, 1);
  transform: perspective(156px) rotateY(20deg) rotate(1deg);
}

.line>span:nth-child(1) {
  width: 81px;
  /*width: 0px;*/
  bottom: -2px;
  right: -5px;
}

.line>span:nth-child(2) {
  bottom: 22px;
  right: -2px;
  transform: rotate(10deg);
}

.line>span:nth-child(3) {
  bottom: 46px;
  right: -8px;
  transform: rotate(20deg);
}

.line>span:nth-child(4) {
  bottom: 69px;
  right: -19px;
  transform: rotate(32deg);
}

.line>span:nth-child(5) {
  bottom: 90px;
  right: -36px;
  transform: rotate(46deg);
}

button {
  display: block;
  position: absolute;
  bottom: 0;
  left: 102%;
  margin: 0 auto;
  padding: 5px;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="basket"><span></span><span></span><span></span><span></span><span></span></div>
  <div class="line"><span></span><span></span><span></span><span></span><span></span></div>
  <button class="button">Пуск</button>
</div>

选项二

function basket() {
  $(".button").prop("disabled", true);
  $(".basket").css('border-width', '1px').animate({
    width: '140px',
    left: '50px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__1__height();
  }, 400);
}

function basket__child__1__height() {
  $(".basket").css('height', '20px');
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").css('border-width', '1px').animate({
    height: '60px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__1__width();
  }, 400);
}

function basket__child__1__width() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    width: '20px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__3__height();
  }, 400);
}

function basket__child__3__height() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").css('border-width', '1px').css('width', '1px').animate({
    height: '41px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__3__width();
  }, 400);
}

function basket__child__3__width() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    width: '50px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__background();
  }, 400);
}

function basket__background() {
  $(".basket>span:nth-child(5) , .basket>span:nth-child(1) , .basket>span:nth-child(2)").addClass('basket__span__background');
  setTimeout(function() {
    line__child__1();
  }, 2000);
}

function line__child__1() {
  $(".line>span:nth-child(1)").addClass('line__background');
  setTimeout(function() {
    line__child__2();
  }, 200);
}

function line__child__2() {
  $(".line>span:nth-child(2)").addClass('line__background');
  setTimeout(function() {
    line__child__3();
  }, 200);
}

function line__child__3() {
  $(".line>span:nth-child(3)").addClass('line__background');
  setTimeout(function() {
    line__child__4();
  }, 200);
}

function line__child__4() {
  $(".line>span:nth-child(4)").addClass('line__background');
  setTimeout(function() {
    line__child__5();
  }, 200);
}

function line__child__5() {
  $(".line>span:nth-child(5)").addClass('line__background');
  setTimeout(function() {
    line__child__5__back();
  }, 500);
}

function line__child__5__back() {
  $(".line>span:nth-child(5)").removeClass('line__background');
  setTimeout(function() {
    line__child__4__back();
  }, 200);
}

function line__child__4__back() {
  $(".line>span:nth-child(4)").removeClass('line__background');
  setTimeout(function() {
    line__child__3__back();
  }, 200);
}

function line__child__3__back() {
  $(".line>span:nth-child(3)").removeClass('line__background');
  setTimeout(function() {
    line__child__2__back();
  }, 200);
}

function line__child__2__back() {
  $(".line>span:nth-child(2)").removeClass('line__background');
  setTimeout(function() {
    line__child__1__back();
  }, 200);
}

function line__child__1__back() {
  $(".line>span:nth-child(1)").removeClass('line__background');
  setTimeout(function() {
    line__child__1();
  }, 500);
}

$(".button").on('click', function() {
  function func() {
    setTimeout(function() {
      basket();
    }, 100);
  }
  func();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fafafb;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(188, 187, 187, 1);
}

.basket {
  position: absolute;
  bottom: 50px;
  left: 120px;
  width: 0px;
  height: 0px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
  transition: background 5s ease-out 0.5s;
}

.basket>span:nth-child(1),
.basket>span:nth-child(2) {
  display: block;
  position: absolute;
  bottom: 0px;
  height: 0px;
  width: 0px;
  border-top: 1px solid rgba(188, 187, 187, 1);
  transition: background 2s ease-in-out 0s;
}

.basket>span:nth-child(1) {
  left: 0px;
  border-left: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(2) {
  right: 0px;
  border-right: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(5) {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 19px;
  transition: background 2s ease-in-out 0s;
}

.basket__span__background {
  background: rgba(188, 187, 187, 1);
  animation-name: background;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}

@keyframes background {
  50% {
    background: rgba(51, 51, 51, 1);
  }
  100% {
    background: rgba(188, 187, 187, 1);
  }
}

.basket>span:nth-child(3),
.basket>span:nth-child(4) {
  display: block;
  position: absolute;
  top: -41px;
  width: 0px;
  height: 0px;
}

.basket>span:nth-child(3) {
  left: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-left: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.basket>span:nth-child(4) {
  right: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-right: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.line {
  position: absolute;
  bottom: 80px;
  right: 79px;
  width: 78px;
  height: 15px;
}

.line>span:nth-child(1),
.line>span:nth-child(2),
.line>span:nth-child(3),
.line>span:nth-child(4),
.line>span:nth-child(5) {
  display: block;
  position: absolute;
  bottom: 0px;
  right: -5px;
  width: 79px;
  height: 15px;
  transform: perspective(156px) rotateY(20deg) rotate(1deg);
}

.line>span:nth-child(1) {
  width: 81px;
  bottom: -2px;
  right: -5px;
}

.line>span:nth-child(2) {
  bottom: 22px;
  right: -2px;
  transform: rotate(10deg);
}

.line>span:nth-child(3) {
  bottom: 46px;
  right: -8px;
  transform: rotate(20deg);
}

.line>span:nth-child(4) {
  bottom: 69px;
  right: -19px;
  transform: rotate(32deg);
}

.line>span:nth-child(5) {
  bottom: 90px;
  right: -36px;
  transform: rotate(46deg);
}

.line__background {
  background-color: rgba(244, 128, 36, 1);
}

button {
  display: block;
  position: absolute;
  bottom: 0;
  left: 102%;
  margin: 0 auto;
  padding: 5px;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="basket"><span></span><span></span><span></span><span></span><span></span></div>
  <div class="line"><span></span><span></span><span></span><span></span><span></span></div>
  <button class="button">Пуск</button>
</div>

其他。现在我们开始从顶部拉篮子并加快步伐

//Пошаговая анимация
//Рисуем контур внутренней части корзины
function basket__child__1__width() { //Функция
  $(".button").hide(); //Скрываем кнопку запуска анимации
  $(".basket>span:nth-child(1)").css('display', 'block').css('height', '2px').animate({ //Анимация разных частей элементов
    width: '100px',
    left: '20px'
  }, 200, 'linear'); //Продолжительность и эффект анимации
  setTimeout(function() { //Анимация следующего шага, отложенная по времени
    basket__child__1__height(); //Функция следующего шага анимации
  }, 200); //Время до запуска следующего шага анимации
}

function basket__child__1__height() {
  $(".basket>span:nth-child(1)").animate({
    height: '40px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__23__width();
  }, 200);
}
//Рисуем контур боковых частей корзины
function basket__child__23__width() {
  $(".basket>span:nth-child(2) , .basket>span:nth-child(3)").css('display', 'block').css('height', '2px').animate({
    width: '20px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__23__height();
  }, 200);
}

function basket__child__23__height() {
  $(".basket>span:nth-child(2) , .basket>span:nth-child(3)").animate({
    height: '40px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__45__height();
  }, 200);
}
//Рисуем контур нижней части корзины
function basket__child__45__height() {
  $(".basket>span:nth-child(4) , .basket>span:nth-child(5)").css('display', 'block').css('width', '2px').animate({
    height: '20px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__45__width();
  }, 200);
}

function basket__child__45__width() {
  $(".basket>span:nth-child(4) , .basket>span:nth-child(5)").animate({
    width: '70px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__background();
  }, 1000);
}

//Закрашиваем корзину
function basket__background() {
  $(".basket>span:nth-child(2) , .basket>span:nth-child(3) , .basket>span:nth-child(4) , .basket>span:nth-child(5)").addClass('basket__span__background');
  setTimeout(function() {
    line__child__1();
  }, 0);
}
//Рисуем линии
function line__child__1() {
  $(".line>span:nth-child(1)").addClass('line__background');
  setTimeout(function() {
    line__child__2();
  }, 100);
}

function line__child__2() {
  $(".line>span:nth-child(2)").addClass('line__background');
  setTimeout(function() {
    line__child__3();
  }, 100);
}

function line__child__3() {
  $(".line>span:nth-child(3)").addClass('line__background');
  setTimeout(function() {
    line__child__4();
  }, 100);
}

function line__child__4() {
  $(".line>span:nth-child(4)").addClass('line__background');
  setTimeout(function() {
    line__child__5();
  }, 100);
}

function line__child__5() {
  $(".line>span:nth-child(5)").addClass('line__background');
  setTimeout(function() {
    line__child__5__back();
  }, 700);
}
//Удаляем линии
function line__child__5__back() {
  $(".line>span:nth-child(5)").removeClass('line__background');
  setTimeout(function() {
    line__child__4__back();
  }, 100);
}

function line__child__4__back() {
  $(".line>span:nth-child(4)").removeClass('line__background');
  setTimeout(function() {
    line__child__3__back();
  }, 100);
}

function line__child__3__back() {
  $(".line>span:nth-child(3)").removeClass('line__background');
  setTimeout(function() {
    line__child__2__back();
  }, 100);
}

function line__child__2__back() {
  $(".line>span:nth-child(2)").removeClass('line__background');
  setTimeout(function() {
    line__child__1__back();
  }, 100);
}

function line__child__1__back() {
  $(".line>span:nth-child(1)").removeClass('line__background');
  setTimeout(function() {
    line__child__1();
  }, 500);
}
//По клику на кнопку запускаем отрисовку элемента
$(".button").on('click', function() {
  function func() {
    setTimeout(function() {
      basket__child__1__width(); //Функция первого шага анимации
    }, 100); //Время до запуска отрисовки элемента после клика на кнопку
  }
  func();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fafafb;
}


/*Общий контейнер*/

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  width: 240px;
  height: 240px;
}


/*Корзина*/

.basket {
  position: absolute;
  bottom: 50px;
  left: 50px;
  width: 140px;
  height: 60px;
}


/*Внутренняя часть корзины*/

.basket>span:nth-child(1) {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 70px;
  height: 0px;
  width: 0px;
  border-bottom: 2px solid rgba(188, 187, 187, 1);
  border-left: 2px solid rgba(188, 187, 187, 1);
  border-right: 2px solid rgba(188, 187, 187, 1);
}


/*Боковые части корзины*/

.basket>span:nth-child(2) {
  display: none;
  position: absolute;
  top: 0px;
  right: 120px;
  height: 0px;
  width: 0px;
  border-top: 2px solid rgba(188, 187, 187, 1);
  border-left: 2px solid rgba(188, 187, 187, 1);
}

.basket>span:nth-child(3) {
  display: none;
  position: absolute;
  top: 0px;
  left: 120px;
  height: 0px;
  width: 0px;
  border-top: 2px solid rgba(188, 187, 187, 1);
  border-right: 2px solid rgba(188, 187, 187, 1);
}


/*Нижняя часть корзины*/

.basket>span:nth-child(4) {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  height: 0px;
  width: 0px;
  border-left: 2px solid rgba(188, 187, 187, 1);
  border-bottom: 2px solid rgba(188, 187, 187, 1);
}

.basket>span:nth-child(5) {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  height: 0px;
  width: 0px;
  border-right: 2px solid rgba(188, 187, 187, 1);
  border-bottom: 2px solid rgba(188, 187, 187, 1);
}


/*Закрашивание корзины*/

.basket__span__background {
  border-width: 0px;
  background: rgba(188, 187, 187, 1);
  animation-name: background;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}


/*Анимация закрашивания корзины*/

@keyframes background {
  20% {
    background: rgba(188, 187, 187, 0);
  }
  40% {
    background: rgba(188, 187, 187, 0.5);
  }
  60% {
    background: rgba(188, 187, 187, 1);
  }
  80% {
    background: rgba(255, 255, 255, 1);
  }
  100% {
    background: rgba(188, 187, 187, 1);
  }
}


/*Линии*/

.line {
  position: absolute;
  bottom: 80px;
  right: 79px;
  width: 78px;
  height: 15px;
}

.line>span:nth-child(1),
.line>span:nth-child(2),
.line>span:nth-child(3),
.line>span:nth-child(4),
.line>span:nth-child(5) {
  display: block;
  position: absolute;
  bottom: 0px;
  right: -5px;
  width: 81px;
  height: 15px;
  transform: perspective(156px) rotateY(20deg) rotate(1deg);
}

.line>span:nth-child(1) {
  width: 84px;
  bottom: -2px;
  right: -5px;
}

.line>span:nth-child(2) {
  bottom: 22px;
  right: -2px;
  transform: rotate(10deg);
}

.line>span:nth-child(3) {
  bottom: 46px;
  right: -8px;
  transform: rotate(20deg);
}

.line>span:nth-child(4) {
  bottom: 69px;
  right: -19px;
  transform: rotate(32deg);
}

.line>span:nth-child(5) {
  bottom: 90px;
  right: -36px;
  transform: rotate(46deg);
}


/*Закрашивание линий*/

.line__background {
  background-color: rgba(244, 128, 36, 1);
  animation-name: line__background;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}


/*Анимация закрашивания линий*/

@keyframes line__background {
  20% {
    background: rgba(244, 128, 36, 0);
  }
  40% {
    background: rgba(244, 128, 36, 0.5);
  }
  60% {
    background: rgba(244, 128, 36, 1);
  }
  80% {
    background: rgba(255, 255, 255, 1);
  }
  100% {
    background: rgba(244, 128, 36, 1);
  }
}


/*Кнопка пуска*/

.button {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  border-radius: 100%;
  background-color: white;
  border: 1px solid rgba(244, 128, 36, 1);
}

.button:before {
  content: "";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  border-radius: 100%;
  background-color: rgba(244, 128, 36, 1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Общий контейнер-->
<div class="container">
  <!--Корзина-->
  <div class="basket"><span></span><span></span><span></span><span></span><span></span></div>
  <!--Линии-->
  <div class="line"><span></span><span></span><span></span><span></span><span></span></div>
</div>
<!--Кнопка пуска-->
<div class="button"></div>

Question 6

使用GSAP的解决方案。

使用的方法：

查询选择器
总长度
设置属性
gsap.timeline (gsap)
gsap.fromTo (gsap)
时间线 .add (gsap)
时间线 .play (gsap)
时间线 .reverse (gsap)
添加事件监听器

基于来自Alexandr_TT的完成向量

const element = document.querySelector('svg');
const basket = document.querySelector('.basket');
const lines = document.querySelectorAll('.line');
const basketLength = basket.getTotalLength();
let onStart = false;

basket.setAttribute('stroke-dasharray', basketLength);

const timeLine = new gsap.timeline({
	paused: true,
	onStart: () => onStart = true,
	onComplete: () => timeLine.reverse(),
	onReverseComplete: () => onStart = false
});

const animateBackground = gsap.fromTo(
	element,
	{
		backgroundColor: '#ccc',
		duration: 1,
		cursor: 'pointer'
	},
	{
		backgroundColor: 'transparent',
		duration: 1,
		cursor: 'default'
	}
);
timeLine.add(animateBackground);

const animateBasket = () => {
	const tl = new gsap.timeline();

	const drawStroke = gsap.fromTo(
		basket,
		{ strokeDashoffset: basketLength, fill: 'none' },
		{ strokeDashoffset: 0, duration: 3, ease: "power1.inOut" }
	);
	const fillBasket = gsap.fromTo(
		basket,
		{ fill: 'none' },
		{ fill: '#bcbbbb', stroke: 'transparent', duration: 3, ease: "power2.inOut" }
	);
	tl.add(drawStroke);
	tl.add(fillBasket);
	return tl;
}

const animateLines = () => {
	const tl = new gsap.timeline();
	lines.forEach((line, i) => {
		const animate = gsap.fromTo(
			line,
			{ opacity: 0, scale: 0.9 },
			{
				opacity: 1,
				scale: 1,
				duration: 0.5,
				ease: "back.out(15)",
				transformOrigin: 'center'
			}
		);
		tl.add(animate, '-=0.35');
	});
	return tl;
}

timeLine.add(animateBasket());
timeLine.add(animateLines(), '-=1.8');

element.addEventListener('click', () => {
	if (!onStart) timeLine.play(0);
});

body {
	margin: 0;
	padding: 0;
}

svg {
	width: 50vw;
	min-width: 240px;
	background-color: #ccc;
}

svg path:first-child {
	fill: #bcbbbb;
	stroke: #bcbbbb;
	stroke-width: 1;
}

svg path:not(:first-child) {
	fill: #f48023;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.0/gsap.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 120 120">
	<path class="basket" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/>
	<path class="line" d="M38 86H76.6V78.3H38V86Z" />
	<path class="line" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" />
	<path class="line" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" />
	<path class="line" d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" />
	<path class="line" d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" />
</svg>

Question 7

为微笑添加物理

#btn{
  cursor: pointer;
}

#btn rect{
  fill: #0095ff;
}

#btn text{
  fill: #fff;
}

#btn:hover rect{
  fill: #0800ff;;
}

.bottom{
  fill: rgb(188,187,187);
  transform: translateX(10px);
}

.bottom-line{
  fill: none;
  stroke: red;
  transform: translateX(10px);
}

rect{
  fill: rgb(244,128,36);
}

#path{
  fill:none;
  stroke:none;
}

.rects{
  width: 23px;
  height: 100px;
  stroke: none;
}

<svg width="150" viewBox="40 0 220 290" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="btn">
  <rect width="100" height="40"  ry="4" x="38%"/>
  <text x="105" y="28">Старт</text>
</g>
 <g> 
    <rect class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.85" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>
  <rect class="rects">
    <animateMotion dur="1s" 
                   repeatCount="1" 
                   calcMode="linear" 
                   rotate="auto" 
                   keyPoints="0.9; 1; 0; 0.70" 
                   keyTimes="0; 0.25; 0.75; 1" 
                   fill="freeze"
                   begin="btn.click"\>
          <mpath xlink:href="#path" />
    </animateMotion>
  </rect>  
     <rect class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.55" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>  
  <rect class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.40" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>  
 <rect  class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.25" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>    
  </g>
  
  
  
 <path d="M 39.989896,216.33981 H 60.40061 v 34.01786 h 140.60728 v -34.01786 h 20.41071 v 52.91666 H 40.745849 Z" class="bottom" opacity="0">
   <animate attributeName="opacity" 
           values="0;0.5;1" 
           dur="1s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>  
  </path>
  
 <path d="M 39.989896,216.33981 H 60.40061 v 34.01786 h 140.60728 v -34.01786 h 20.41071 v 52.91666 H 40.745849 Z" stroke-dasharray="0 100" class="bottom-line"> 
  <animate attributeName="stroke-dasharray" 
           values="0 1000; 700 0 " 
           dur="2s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>
    <animate attributeName="stroke" 
           values="rgb(188,187,187); #ccc" 
           dur="2.3s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>
      <animate attributeName="stroke-width" 
           values="7;2" 
           dur="2.3s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>
</path>
  
 <path d="M260,100  Q180,150 193,240"  id="path"/>
</svg>

Stranger in the Q · Answer 1 · 2020-02-23T03:54:34Z

let s = c.width, // размер иконки
  w = s / 2.3, // ширина блока
  h = s / 13, // высота блока
  start = Date.now(), // время старта
  fall = 900, // продолжительность падения одного блока
  spring = 150, // продолжительность эффекта пружины
  jump = 2000, // продолжительность "прыжка" в конце
  jumpDelay = 2700, // задержка срабатываня прыжка 
  delay = i => i * (600 - i * 50), // задержка между падениями
  clamp = (v, t) => Math.min(1, Math.max(0, v) / t), // приведение к интервалу 0 - 1
  ctx = c.getContext("2d");

function draw() {
  let time = Date.now() - start; // timestamp кадра
  ctx.clearRect(0, 0, s, s); // очистка
  ctx.fillStyle = "white"; // цвет блоков и корзины

  // блоки  
  [0, 1, 2, 3, 4].forEach(block => {

    // падение
    let t = clamp(time - delay(block), fall); // интервал времени падения
    let y = s * (t * t * t * 1.5 - 1.65 - .1 * block); // сглаживание y = t^3

    // эффект пружины
    for (let i = 0; i < 5; i++) { // столько раз сколько блоков
      t = clamp(time - fall - delay(i), spring) - .6; // время срабатывания
      y += (1 - t * t) * s * .09; // сглаживание y = 1 - t^2
    }

    // подпрыгивание 
    t = clamp(time - jumpDelay, jump); // время срабатывания
    // веселая функция сглаживания "elastic"
    t = Math.pow(2, -10 * t) * Math.sin((t - .4 / 4) * (2 * Math.PI) / .4) + 1;
    let r = t * block * .075 * Math.PI; // угол для каждого блока
    let x = s * .6 - Math.cos(r) * s * .6; // положение по х
    y -= Math.sin(r) * s * .6 - s * .1 * block * t; // положение по y

    // отрисовка
    ctx.save();
    ctx.translate(s / 2 + x, s / 2 + y);
    ctx.rotate(r);
    ctx.fillRect(-w / 2, -h / 2, w, h);
    ctx.restore();
  });

  // корзина
  let y = s * 0.14;
  [
    [-w / 2 - h * 2, y, h, s * 0.25],
    [w / 2 + h, y, h, s * 0.25],
    [-w / 2 - h * 2, y + s * 0.2, w + h * 4, h]
  ]
  .forEach(r => ctx.fillRect(s / 2 + r[0], s / 2 + r[1], r[2], r[3]));

  requestAnimationFrame(draw);
}

addEventListener('click', () => start = Date.now());
draw();

<canvas id=c width=175 height=175 style='background:steelblue'><canvas>

UModeL · Answer 2 · 2020-02-23T22:17:39Z

仅 CSS...

好吧，一点点 HTML））由于拒绝其他技术，样式表变得很友好。

* { margin: 0; padding: 0; } body { background: url("https://isstatic.askoverflow.dev/m9NKc.png") 0% 0% no-repeat #eee; height: 100vh; display: flex; flex-flow: row nowrap; justify-content: space-around; justify-content: space-evenly; align-items: center; }

:root { --spd_stroke: 0.8s; --spd_fill: 1s; --color: rgba(188, 187, 187, 1); }

/* Кнопка запуска и контейнер */
input[type="radio"] { width: 50px; height: 50px; transition: opacity 2s ease; }
input[type="radio"]:checked { opacity: 0; }
input[type="radio"]:checked + div { display: block; }

.so-icon {
  display: none;
  position: absolute;
  font-size: 165px;
  line-height: 1em;
  width: 1em;
  height: 1em;
}

/* Внутренняя часть лотка */
.basket-sup {
  position: absolute;
  bottom: 0.065em; left: 50%;
  transform: translatex(-50%);
  height: 0; width: 0;
  box-sizing: border-box;
  border: 0.02em solid var(--color);
  border-top: none;
  background-color: rgba(0, 128, 0, 0);
  animation: basket-sup calc(var(--spd_stroke) * 2) linear forwards;
}
@keyframes basket-sup {
  55% { height: 0; width: 0.66em; }
  100% { height: 0.285em; width: 0.66em; }
}

/* Боковые части лотка */
.basket-sup::before,
.basket-sup::after {
  content: "";
  position: absolute;
  top: 0;
  height: 0; width: 0;
  box-sizing: border-box;
  border: none;
  border-top: 0.02em solid var(--color);
  background-color: rgba(0, 128, 0, 0);
}
.basket-sup::before {
  left: 0.001em;
  margin-left: -0.02em;
  border-left: 0.02em solid var(--color);
  animation: basket-sup-before calc(var(--spd_stroke) * 1.6) linear calc(var(--spd_stroke) * 2) forwards, basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
@keyframes basket-sup-before {
  25% { height: 0; width: 0.075em; margin-left: -0.094em; }
  100% { height: 0.35em; width: 0.075em; margin-left: -0.094em; }
}
.basket-sup::after {
  right: 0.001em;
  margin-right: -0.02em;
  border-right: 0.02em solid var(--color);
  animation: basket-sup-after calc(var(--spd_stroke) * 1.6) linear calc(var(--spd_stroke) * 2) forwards, basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
@keyframes basket-sup-after {
  25% { height: 0;  width: 0.075em; margin-right: -0.094em; }
  100% { height: 0.35em; width: 0.075em; margin-right: -0.094em; }
}

/* Нижняя часть лотка */
.basket-sub {
  position: absolute;
  bottom: 0.02em; left: 50%;
  transform: translatex(-50%);
  height: 0.046em; width: 0.66em;
  border: none;
  animation: basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
.basket-sub::before,
.basket-sub::after {
  content: "";
  position: absolute;
  bottom: -0.02em;
  height: 0; width: 0;
  border: none;
  border-bottom: 0.02em solid var(--color);
  animation: basket-sub calc(var(--spd_stroke) * 1.2) linear calc(var(--spd_stroke) * 3.6) forwards, basket-fill calc(var(--spd_fill) * 1) linear calc(var(--spd_stroke) * 4.7) forwards;
}
.basket-sub::before {  left: -0.054em; }
.basket-sub::after { right: -0.054em; }

@keyframes basket-sub {
  100% { width: 0.39em; }
}
@keyframes basket-fill {
  0% { background-color: rgba(188, 187, 187, 0); }
  20% { background-color: rgba(188, 187, 187, 0.5); }
  30% { background-color: rgba(255, 255, 255, 1); }
  100% { background-color: rgba(188, 187, 187, 1) }
}

/* Листы */
div.lists-wrap {
  position: relative;
  display: block;
  height: 1em; width: 1.3em;
}

div.lists-wrap span {
  position: absolute;
  display: block;
  height: 72px; width: 14px;
  transform-origin: 50% 100%;
  animation: list-show 1s linear forwards, list-rotate 1.5s cubic-bezier(1, 0, 0.45, 0.7) infinite alternate;
}
.lists-wrap span:nth-child(1) {
  top: 55px; left: 109px;
  transform: rotate(-90deg);
  animation-delay: 5s, 6.0s;
}
.lists-wrap span:nth-child(2) {
  top: 37px; left: 111px;
  transform: rotate(-78deg);
  animation-delay: 5.1s, 6.1s;
}
.lists-wrap span:nth-child(3) {
  top: 19px; left: 117px;
  transform: rotate(-65deg);
  animation-delay: 5.2s, 6.2s;
}
.lists-wrap span:nth-child(4) {
  top: 2px; left: 126px;
  transform: rotate(-50deg);
  animation-delay: 5.3s, 6.3s;
}
.lists-wrap span:nth-child(5) {
  top: -11px; left: 140px;
  transform: rotate(-37deg);
  animation-delay: 5.4s, 6.4s;
}
@keyframes list-show {
  0% { box-shadow: inset 0 0 8px -1px #f4802400, 0 0 8px -1px #f4802400; }
  20% { box-shadow: inset 0 0 12px -1px #f48024ff, 0 0 12px -1px #f48024ff; }
  30% { box-shadow: inset 0 0 9px -1px #ffffffff, 0 0 16px -1px #f48024ff; }
  100% { box-shadow: inset 0 0 7px 7px #f48024ff, 0 0 8px -1px #ffffff00; }
}
@keyframes list-rotate {
  100% { height: 0px; }
}

<input type="radio">
<div class="so-icon">
  <div class="basket-sup"></div>
  <div class="basket-sub"></div>
  <div class='lists-wrap'>
    <span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

Alexandr_TT · Answer 3 · 2020-02-21T01:05:09Z

SVG 解决方案

首先，我将开始实现问题中脚本从3到5的图标动画

外貌 opacity:1
消失的彩色条纹图标opacity:0
然后在一个循环结束后，重复该过程。

有关两条条纹动画示例的更多详细信息

最初，所有条纹都是隐藏的。

每个条纹都有两个动画：
一个动画显示条纹，第二个动画使条纹不可见。

<path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
               <!-- 3. Анимация появления первой цветной полоски -->
           <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back5.end+1.5s" fill="freeze" />  
                <!-- 4. Анимация исчезновения первой цветной полоски -->
             <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" />
        </path>

首先，有显示条纹的动画的顺序枚举。

例如，显示第二个片段的动画的id="an2"启动将在显示第一个片段的动画结束后开始，并id="an1"有一些延迟 begin="an1.end+0.5s"

然后依次启动隐藏条纹的动画。

第二条被隐藏（）它的动画将在同一条的显示动画（） id="Back2"结束后开始id="an2"

begin="an2.end+0.5s"

接下来，隐藏第一条。

通过重新开始显示第一条的动画来重复连续显示和隐藏动画的完整循环。

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 10 120 120" style="border:1px solid;">
  <style>
    .st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
	.st1{fill:#f48023;opacity:0;}
	.st2{fill:#BCBBBB;}

  </style>
  <path class="st2"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"> 
       
  </path>   
   
  
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	     <!--  Анимация появления первой цветной полосы -->
		   <!--  Первый запуск анимации по клику мышки и повторный запуск после окончания цикла `begin="svg1.click;Back2.end+1.5s"` -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back2.end+1.5s" fill="freeze" restart="whenNotActive" /> 
	   
	   <!--  Анимация исчезновения первой цветной полосы-->
	     <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.5s" fill="freeze" restart="whenNotActive" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >

         <!--  Анимация появления второй цветной полосы -->
	   <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.5s"
     	   fill="freeze" restart="whenNotActive" />  
		
		<!--  Анимация исчезновения второй цветной полосы -->
	     <animate id="Back2" attributeName="opacity" to="0" dur="0.001s"
    		 begin="an2.end+0.5s"  fill="freeze" restart="whenNotActive" />
  </path>	  
    
    <text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>  
</svg>

全套条纹图标的示例动画

点击蓝色方块

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120" style="border:1px solid;">
  <style>
    .st0{fill:white;}
	.st1{fill:white;opacity:0;}

  </style>
    <rect width="100%" height="100%" fill="#005999" />
  <path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z">
  
  </path>   
   
     
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	       <!-- 3. Анимация появления первой цветной полоски -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back5.end+1.5s" fill="freeze" />  
	        <!-- 4. Анимация исчезновения первой цветной полоски -->
	     <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >
      <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" /> 
	     <animate id="Back2" attributeName="opacity" to="0" dur="0.001s" begin="Back3.end+0.125s" fill="freeze" />
  </path>	  
    <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" >
       <animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s" fill="freeze" />
	     <animate id="Back3" attributeName="opacity" to="0" dur="0.001s" begin="Back4.end+0.125s" fill="freeze" />
  </path>	
	
  <path class="st1"  d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" >
      <animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" />
	    <animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" />
  </path>
  
  <path class="st1"  d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" >
     <animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" /> 
	   <animate id="Back5" attributeName="opacity" dur="0.001s" to="0"  begin="an5.end+1s" fill="freeze" />
  </path>	   
</svg>

购物车图标的动画

基于变化参数绘制轮廓stroke-dasharray
将轮廓从背景颜色填充到篮子图标的颜色

<path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!--1. Анимация рисования контура корзины -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />  
         <!-- 2. Заполнение цветом корзины -->
       <animate id="bask_fill"  attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
  </path>

下面是 EnSO 图标的完整代码

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 12 120 120" style="border:1px solid;">
  <style>
    .st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
	.st1{fill:#f48023;opacity:0;}

  </style>
  <path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!--1. Анимация рисования контура корзины -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />  
	     <!-- 2. Заполнение цветом корзины -->
	   <animate id="bask_fill"  attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
  </path>   
   
  
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	     <!-- 3. Анимация появления первой цветной полоски -->
		   <!-- 5. Зацикливание появления, исчезновения полосок `begin="bask_fill.end;Back5.end+1.5s` -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="bask_fill.end;Back5.end+1.5s" fill="freeze" /> 
	        <!-- 4. Анимация исчезновения первой цветной полоски -->
	     <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >
         <!-- 3. Анимация появления второй цветной полоски -->
	   <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" />     <!-- 4. Анимация исчезновения второй цветной полоски -->
	     <animate id="Back2" attributeName="opacity" to="0" dur="0.001s" begin="Back3.end+0.125s" fill="freeze" />
  </path>	  
    <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" >
       <animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s" fill="freeze" />
	     <animate id="Back3" attributeName="opacity" to="0" dur="0.001s" begin="Back4.end+0.125s" fill="freeze" />
  </path>	
	
  <path class="st1"  d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" >
      <animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" />
	    <animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" />
  </path>
  
  <path class="st1"  d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" >
     <animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" /> 
	   <animate id="Back5" attributeName="opacity" dur="0.001s" to="0"  begin="an5.end+1s" fill="freeze" />
  </path>	   
    <text x="32" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>  
</svg>

以下是 RuSO 图标的完整代码

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 12 120 120" style="border:1px solid;">
  <style>
    .st0{fill:#005999; stroke:white; stroke-width:2;}
	.st1{fill:white;opacity:0;}

  </style> 
    <rect width="100%" height="100%" fill="#005999" />
  <path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!--1. Анимация рисования контура корзины -->
     <animate id="bask"
       attributename="stroke-dasharray"
       dur="4s"
       begin="svg1.click"
       values="0,123.5 0,123.5;0,0,247,0"
       fill="freeze" />  
	     <!-- 2. Заполнение цветом корзины -->
	   <animate id="bask_fill"
        attributename="fill"
        dur="1s"
        begin="bask.end"
        values="#005999;white"
        fill="freeze" />
  </path>   
   
  
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	     <!-- 3. Анимация появления первой цветной полоски -->
		   <!-- 5. Зацикливание появления, исчезновения полосок `begin="bask_fill.end;Back5.end+1.5s` -->
	   <animate id="an1"
       attributeName="opacity"
       to="1"
       dur="0.001s"
       begin="bask_fill.end;Back5.end+1.5s"
       fill="freeze" /> 
	        <!-- 4. Анимация исчезновения первой цветной полоски -->
	     <animate id="Back1"
       attributeName="opacity" to="0"
       dur="0.001s"
       begin="Back2.end+0.125s"
       fill="freeze" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >
         <!-- 3. Анимация появления второй цветной полоски -->
	   <animate id="an2"
       attributeName="opacity" to="1"
       dur="0.001s"
       begin="an1.end+0.125s"
       fill="freeze" />     <!-- 4. Анимация исчезновения второй цветной полоски -->
	     <animate id="Back2"
       attributeName="opacity" to="0"
       dur="0.001s"
       begin="Back3.end+0.125s"
       fill="freeze" />
  </path>	  
    <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" >
       <animate id="an3"
         attributeName="opacity" to="1"
         dur="0.001s"
         begin="an2.end+0.125s"
         fill="freeze" />
	     <animate id="Back3"
          attributeName="opacity" to="0"
          dur="0.001s"
          begin="Back4.end+0.125s"
          fill="freeze" />
  </path>	
	
  <path class="st1"  d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" >
      <animate id="an4"
        attributeName="opacity" to="1"
        dur="0.001s"
        begin="an3.end+0.125s"
        fill="freeze" />
	    <animate id="Back4"
        attributeName="opacity" to="0"
        dur="0.001s"
        begin="Back5.end+0.125s"
        fill="freeze" />
  </path>
  
  <path class="st1"  d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" >
     <animate id="an5"
        attributeName="opacity"
        dur="0.001s"
        to="1"
        begin="an4.end+0.125s"
        fill="freeze" /> 
	   <animate id="Back5"
        attributeName="opacity"
        dur="0.001s"
        to="0"
        begin="an5.end+1s"
        fill="freeze" />
  </path>	   
   <text x="30" y="130" font-size="14px" fill="#005999" >Click me</text> 
</svg>

Sevastopol' · Answer 4 · 2020-02-23T01:04:03Z

CSS + jQuery 解决方案

选项一

function basket() {
$(".button").prop("disabled", true);
  $(".basket").css('border-width', '1px').animate({
    width: '140px',
    left: '50px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__height();
  }, 500);
}

function basket__child__1__height() {
  $(".basket").css('height', '20px');
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").css('border-width', '1px').animate({
    height: '60px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__width();
  }, 500);
}

function basket__child__1__width() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    width: '20px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__height();
  }, 500);
}

function basket__child__3__height() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").css('border-width', '1px').css('width', '1px').animate({
    height: '41px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__width();
  }, 500);
}

function basket__child__3__width() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    width: '50px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__background();
  }, 500);
}

function basket__background() {
  $(".basket>span:nth-child(5) , .basket>span:nth-child(1) , .basket>span:nth-child(2)").addClass('basket__span__background');
  setTimeout(function() {
    line__child__1();
  }, 2000);
}

function line__child__1() {
  $(".line>span:nth-child(1)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__2();
  }, 200);
}

function line__child__2() {
  $(".line>span:nth-child(2)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__3();
  }, 200);
}

function line__child__3() {
  $(".line>span:nth-child(3)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__4();
  }, 200);
}

function line__child__4() {
  $(".line>span:nth-child(4)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__5();
  }, 200);
}

function line__child__5() {
  $(".line>span:nth-child(5)").animate({
    height: '15px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__5__back();
  }, 500);
}

function line__child__5__back() {
  $(".line>span:nth-child(5)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__4__back();
  }, 200);
}

function line__child__4__back() {
  $(".line>span:nth-child(4)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__3__back();
  }, 200);
}

function line__child__3__back() {
  $(".line>span:nth-child(3)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__2__back();
  }, 200);
}

function line__child__2__back() {
  $(".line>span:nth-child(2)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    line__child__1__back();
  }, 200);
}

function line__child__1__back() {
  $(".line>span:nth-child(1)").animate({
    height: '0px'
  }, 100, 'swing');
  setTimeout(function() {
    basket__background__back();
  }, 200);
}

function basket__background__back() {
  $(".basket>span:nth-child(5) , .basket>span:nth-child(1) , .basket>span:nth-child(2)").removeClass('basket__span__background');
  setTimeout(function() {
    basket__child__3__width__back();
  }, 2000);
}

function basket__child__3__width__back() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    width: '1px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__height__back();
  }, 500);
}

function basket__child__3__height__back() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    height: '0px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__3__height__back__css();
  }, 500);
}

function basket__child__3__height__back__css() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").css('width', '0px').css('border-width', '0px');
  setTimeout(function() {
    basket__child__1__width__back();
  }, 1);
}

function basket__child__1__width__back() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    width: '0px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__height__back();
  }, 500);
}

function basket__child__1__height__back() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    height: '0px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__child__1__height__back__css();
  }, 500);
}

function basket__child__1__height__back__css() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").css('border-width', '0px');
  $(".basket").css('height', '0px');
  setTimeout(function() {
    basket__back();
  }, 1);
}

function basket__back() {
  $(".basket").animate({
    width: '0px',
    left: '120px'
  }, 500, 'linear');
  setTimeout(function() {
    basket__back__css();
  }, 500);
}

function basket__back__css() {
  $(".basket").css('border-width', '0px');
  setTimeout(function() {
    basket();
  }, 2000);
}
$(".button").on('click', function() {
  function func() {
    setTimeout(function() {
      basket();
    }, 100);
  }
  func();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fafafb;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(188, 187, 187, 1);
}

.basket {
  position: absolute;
  bottom: 50px;
  /*left: 50px;*/
  left: 120px;
  /*width: 140px;*/
  width: 0px;
  /*height: 20px;*/
  height: 0px;
  /*background: rgba(188,187,187,1);*/
  /*background: transparent;*/
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
  transition: background 2s ease-out 0s;
}

.basket>span:nth-child(1),
.basket>span:nth-child(2) {
  display: block;
  position: absolute;
  bottom: 0px;
  /*height: 60px;*/
  height: 0px;
  /*width: 20px;*/
  width: 0px;
  /*background: rgba(188,187,187,1);*/
  border-top: 1px solid rgba(188, 187, 187, 1);
  transition: background 2s ease-in-out 0s;
}

.basket>span:nth-child(1) {
  left: 0px;
  border-left: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(2) {
  right: 0px;
  border-right: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(5) {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 19px;
  /*background: rgba(188,187,187,1);*/
  transition: background 2s ease-in-out 0s;
}

.basket__span__background {
  background: rgba(188, 187, 187, 1);
  animation-name: background;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}

@keyframes background {
  50% {
    background: rgba(51, 51, 51, 1);
  }
  100% {
    background: rgba(188, 187, 187, 1);
  }
}

.basket>span:nth-child(3),
.basket>span:nth-child(4) {
  display: block;
  position: absolute;
  top: -41px;
  /*width: 50px;*/
  width: 0px;
  /*height: 41px;*/
  height: 0px;
}

.basket>span:nth-child(3) {
  left: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-left: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.basket>span:nth-child(4) {
  right: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-right: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.line {
  position: absolute;
  bottom: 80px;
  right: 79px;
  width: 78px;
  height: 15px;
}

.line>span:nth-child(1),
.line>span:nth-child(2),
.line>span:nth-child(3),
.line>span:nth-child(4),
.line>span:nth-child(5) {
  display: block;
  position: absolute;
  bottom: 0px;
  right: -5px;
  width: 79px;
  /*width: 0px;*/
  /*height: 15px;*/
  height: 0px;
  background-color: rgba(244, 128, 36, 1);
  border: 0px solid rgba(244, 128, 36, 1);
  transform: perspective(156px) rotateY(20deg) rotate(1deg);
}

.line>span:nth-child(1) {
  width: 81px;
  /*width: 0px;*/
  bottom: -2px;
  right: -5px;
}

.line>span:nth-child(2) {
  bottom: 22px;
  right: -2px;
  transform: rotate(10deg);
}

.line>span:nth-child(3) {
  bottom: 46px;
  right: -8px;
  transform: rotate(20deg);
}

.line>span:nth-child(4) {
  bottom: 69px;
  right: -19px;
  transform: rotate(32deg);
}

.line>span:nth-child(5) {
  bottom: 90px;
  right: -36px;
  transform: rotate(46deg);
}

button {
  display: block;
  position: absolute;
  bottom: 0;
  left: 102%;
  margin: 0 auto;
  padding: 5px;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="basket"><span></span><span></span><span></span><span></span><span></span></div>
  <div class="line"><span></span><span></span><span></span><span></span><span></span></div>
  <button class="button">Пуск</button>
</div>

选项二

function basket() {
  $(".button").prop("disabled", true);
  $(".basket").css('border-width', '1px').animate({
    width: '140px',
    left: '50px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__1__height();
  }, 400);
}

function basket__child__1__height() {
  $(".basket").css('height', '20px');
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").css('border-width', '1px').animate({
    height: '60px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__1__width();
  }, 400);
}

function basket__child__1__width() {
  $(".basket>span:nth-child(1) , .basket>span:nth-child(2)").animate({
    width: '20px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__3__height();
  }, 400);
}

function basket__child__3__height() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").css('border-width', '1px').css('width', '1px').animate({
    height: '41px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__child__3__width();
  }, 400);
}

function basket__child__3__width() {
  $(".basket>span:nth-child(3) , .basket>span:nth-child(4)").animate({
    width: '50px'
  }, 400, 'linear');
  setTimeout(function() {
    basket__background();
  }, 400);
}

function basket__background() {
  $(".basket>span:nth-child(5) , .basket>span:nth-child(1) , .basket>span:nth-child(2)").addClass('basket__span__background');
  setTimeout(function() {
    line__child__1();
  }, 2000);
}

function line__child__1() {
  $(".line>span:nth-child(1)").addClass('line__background');
  setTimeout(function() {
    line__child__2();
  }, 200);
}

function line__child__2() {
  $(".line>span:nth-child(2)").addClass('line__background');
  setTimeout(function() {
    line__child__3();
  }, 200);
}

function line__child__3() {
  $(".line>span:nth-child(3)").addClass('line__background');
  setTimeout(function() {
    line__child__4();
  }, 200);
}

function line__child__4() {
  $(".line>span:nth-child(4)").addClass('line__background');
  setTimeout(function() {
    line__child__5();
  }, 200);
}

function line__child__5() {
  $(".line>span:nth-child(5)").addClass('line__background');
  setTimeout(function() {
    line__child__5__back();
  }, 500);
}

function line__child__5__back() {
  $(".line>span:nth-child(5)").removeClass('line__background');
  setTimeout(function() {
    line__child__4__back();
  }, 200);
}

function line__child__4__back() {
  $(".line>span:nth-child(4)").removeClass('line__background');
  setTimeout(function() {
    line__child__3__back();
  }, 200);
}

function line__child__3__back() {
  $(".line>span:nth-child(3)").removeClass('line__background');
  setTimeout(function() {
    line__child__2__back();
  }, 200);
}

function line__child__2__back() {
  $(".line>span:nth-child(2)").removeClass('line__background');
  setTimeout(function() {
    line__child__1__back();
  }, 200);
}

function line__child__1__back() {
  $(".line>span:nth-child(1)").removeClass('line__background');
  setTimeout(function() {
    line__child__1();
  }, 500);
}

$(".button").on('click', function() {
  function func() {
    setTimeout(function() {
      basket();
    }, 100);
  }
  func();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fafafb;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(188, 187, 187, 1);
}

.basket {
  position: absolute;
  bottom: 50px;
  left: 120px;
  width: 0px;
  height: 0px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
  transition: background 5s ease-out 0.5s;
}

.basket>span:nth-child(1),
.basket>span:nth-child(2) {
  display: block;
  position: absolute;
  bottom: 0px;
  height: 0px;
  width: 0px;
  border-top: 1px solid rgba(188, 187, 187, 1);
  transition: background 2s ease-in-out 0s;
}

.basket>span:nth-child(1) {
  left: 0px;
  border-left: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(2) {
  right: 0px;
  border-right: 1px solid rgba(188, 187, 187, 1);
  border-width: 0px;
}

.basket>span:nth-child(5) {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 19px;
  transition: background 2s ease-in-out 0s;
}

.basket__span__background {
  background: rgba(188, 187, 187, 1);
  animation-name: background;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}

@keyframes background {
  50% {
    background: rgba(51, 51, 51, 1);
  }
  100% {
    background: rgba(188, 187, 187, 1);
  }
}

.basket>span:nth-child(3),
.basket>span:nth-child(4) {
  display: block;
  position: absolute;
  top: -41px;
  width: 0px;
  height: 0px;
}

.basket>span:nth-child(3) {
  left: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-left: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.basket>span:nth-child(4) {
  right: 20px;
  border-bottom: 1px solid rgba(188, 187, 187, 1);
  border-right: 1px solid rgba(188, 187, 187, 1);
  background-color: transparent;
  border-width: 0px;
}

.line {
  position: absolute;
  bottom: 80px;
  right: 79px;
  width: 78px;
  height: 15px;
}

.line>span:nth-child(1),
.line>span:nth-child(2),
.line>span:nth-child(3),
.line>span:nth-child(4),
.line>span:nth-child(5) {
  display: block;
  position: absolute;
  bottom: 0px;
  right: -5px;
  width: 79px;
  height: 15px;
  transform: perspective(156px) rotateY(20deg) rotate(1deg);
}

.line>span:nth-child(1) {
  width: 81px;
  bottom: -2px;
  right: -5px;
}

.line>span:nth-child(2) {
  bottom: 22px;
  right: -2px;
  transform: rotate(10deg);
}

.line>span:nth-child(3) {
  bottom: 46px;
  right: -8px;
  transform: rotate(20deg);
}

.line>span:nth-child(4) {
  bottom: 69px;
  right: -19px;
  transform: rotate(32deg);
}

.line>span:nth-child(5) {
  bottom: 90px;
  right: -36px;
  transform: rotate(46deg);
}

.line__background {
  background-color: rgba(244, 128, 36, 1);
}

button {
  display: block;
  position: absolute;
  bottom: 0;
  left: 102%;
  margin: 0 auto;
  padding: 5px;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="basket"><span></span><span></span><span></span><span></span><span></span></div>
  <div class="line"><span></span><span></span><span></span><span></span><span></span></div>
  <button class="button">Пуск</button>
</div>

其他。现在我们开始从顶部拉篮子并加快步伐

//Пошаговая анимация
//Рисуем контур внутренней части корзины
function basket__child__1__width() { //Функция
  $(".button").hide(); //Скрываем кнопку запуска анимации
  $(".basket>span:nth-child(1)").css('display', 'block').css('height', '2px').animate({ //Анимация разных частей элементов
    width: '100px',
    left: '20px'
  }, 200, 'linear'); //Продолжительность и эффект анимации
  setTimeout(function() { //Анимация следующего шага, отложенная по времени
    basket__child__1__height(); //Функция следующего шага анимации
  }, 200); //Время до запуска следующего шага анимации
}

function basket__child__1__height() {
  $(".basket>span:nth-child(1)").animate({
    height: '40px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__23__width();
  }, 200);
}
//Рисуем контур боковых частей корзины
function basket__child__23__width() {
  $(".basket>span:nth-child(2) , .basket>span:nth-child(3)").css('display', 'block').css('height', '2px').animate({
    width: '20px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__23__height();
  }, 200);
}

function basket__child__23__height() {
  $(".basket>span:nth-child(2) , .basket>span:nth-child(3)").animate({
    height: '40px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__45__height();
  }, 200);
}
//Рисуем контур нижней части корзины
function basket__child__45__height() {
  $(".basket>span:nth-child(4) , .basket>span:nth-child(5)").css('display', 'block').css('width', '2px').animate({
    height: '20px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__child__45__width();
  }, 200);
}

function basket__child__45__width() {
  $(".basket>span:nth-child(4) , .basket>span:nth-child(5)").animate({
    width: '70px'
  }, 200, 'linear');
  setTimeout(function() {
    basket__background();
  }, 1000);
}

//Закрашиваем корзину
function basket__background() {
  $(".basket>span:nth-child(2) , .basket>span:nth-child(3) , .basket>span:nth-child(4) , .basket>span:nth-child(5)").addClass('basket__span__background');
  setTimeout(function() {
    line__child__1();
  }, 0);
}
//Рисуем линии
function line__child__1() {
  $(".line>span:nth-child(1)").addClass('line__background');
  setTimeout(function() {
    line__child__2();
  }, 100);
}

function line__child__2() {
  $(".line>span:nth-child(2)").addClass('line__background');
  setTimeout(function() {
    line__child__3();
  }, 100);
}

function line__child__3() {
  $(".line>span:nth-child(3)").addClass('line__background');
  setTimeout(function() {
    line__child__4();
  }, 100);
}

function line__child__4() {
  $(".line>span:nth-child(4)").addClass('line__background');
  setTimeout(function() {
    line__child__5();
  }, 100);
}

function line__child__5() {
  $(".line>span:nth-child(5)").addClass('line__background');
  setTimeout(function() {
    line__child__5__back();
  }, 700);
}
//Удаляем линии
function line__child__5__back() {
  $(".line>span:nth-child(5)").removeClass('line__background');
  setTimeout(function() {
    line__child__4__back();
  }, 100);
}

function line__child__4__back() {
  $(".line>span:nth-child(4)").removeClass('line__background');
  setTimeout(function() {
    line__child__3__back();
  }, 100);
}

function line__child__3__back() {
  $(".line>span:nth-child(3)").removeClass('line__background');
  setTimeout(function() {
    line__child__2__back();
  }, 100);
}

function line__child__2__back() {
  $(".line>span:nth-child(2)").removeClass('line__background');
  setTimeout(function() {
    line__child__1__back();
  }, 100);
}

function line__child__1__back() {
  $(".line>span:nth-child(1)").removeClass('line__background');
  setTimeout(function() {
    line__child__1();
  }, 500);
}
//По клику на кнопку запускаем отрисовку элемента
$(".button").on('click', function() {
  function func() {
    setTimeout(function() {
      basket__child__1__width(); //Функция первого шага анимации
    }, 100); //Время до запуска отрисовки элемента после клика на кнопку
  }
  func();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fafafb;
}


/*Общий контейнер*/

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  width: 240px;
  height: 240px;
}


/*Корзина*/

.basket {
  position: absolute;
  bottom: 50px;
  left: 50px;
  width: 140px;
  height: 60px;
}


/*Внутренняя часть корзины*/

.basket>span:nth-child(1) {
  display: none;
  position: absolute;
  bottom: 20px;
  left: 70px;
  height: 0px;
  width: 0px;
  border-bottom: 2px solid rgba(188, 187, 187, 1);
  border-left: 2px solid rgba(188, 187, 187, 1);
  border-right: 2px solid rgba(188, 187, 187, 1);
}


/*Боковые части корзины*/

.basket>span:nth-child(2) {
  display: none;
  position: absolute;
  top: 0px;
  right: 120px;
  height: 0px;
  width: 0px;
  border-top: 2px solid rgba(188, 187, 187, 1);
  border-left: 2px solid rgba(188, 187, 187, 1);
}

.basket>span:nth-child(3) {
  display: none;
  position: absolute;
  top: 0px;
  left: 120px;
  height: 0px;
  width: 0px;
  border-top: 2px solid rgba(188, 187, 187, 1);
  border-right: 2px solid rgba(188, 187, 187, 1);
}


/*Нижняя часть корзины*/

.basket>span:nth-child(4) {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  height: 0px;
  width: 0px;
  border-left: 2px solid rgba(188, 187, 187, 1);
  border-bottom: 2px solid rgba(188, 187, 187, 1);
}

.basket>span:nth-child(5) {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  height: 0px;
  width: 0px;
  border-right: 2px solid rgba(188, 187, 187, 1);
  border-bottom: 2px solid rgba(188, 187, 187, 1);
}


/*Закрашивание корзины*/

.basket__span__background {
  border-width: 0px;
  background: rgba(188, 187, 187, 1);
  animation-name: background;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}


/*Анимация закрашивания корзины*/

@keyframes background {
  20% {
    background: rgba(188, 187, 187, 0);
  }
  40% {
    background: rgba(188, 187, 187, 0.5);
  }
  60% {
    background: rgba(188, 187, 187, 1);
  }
  80% {
    background: rgba(255, 255, 255, 1);
  }
  100% {
    background: rgba(188, 187, 187, 1);
  }
}


/*Линии*/

.line {
  position: absolute;
  bottom: 80px;
  right: 79px;
  width: 78px;
  height: 15px;
}

.line>span:nth-child(1),
.line>span:nth-child(2),
.line>span:nth-child(3),
.line>span:nth-child(4),
.line>span:nth-child(5) {
  display: block;
  position: absolute;
  bottom: 0px;
  right: -5px;
  width: 81px;
  height: 15px;
  transform: perspective(156px) rotateY(20deg) rotate(1deg);
}

.line>span:nth-child(1) {
  width: 84px;
  bottom: -2px;
  right: -5px;
}

.line>span:nth-child(2) {
  bottom: 22px;
  right: -2px;
  transform: rotate(10deg);
}

.line>span:nth-child(3) {
  bottom: 46px;
  right: -8px;
  transform: rotate(20deg);
}

.line>span:nth-child(4) {
  bottom: 69px;
  right: -19px;
  transform: rotate(32deg);
}

.line>span:nth-child(5) {
  bottom: 90px;
  right: -36px;
  transform: rotate(46deg);
}


/*Закрашивание линий*/

.line__background {
  background-color: rgba(244, 128, 36, 1);
  animation-name: line__background;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
}


/*Анимация закрашивания линий*/

@keyframes line__background {
  20% {
    background: rgba(244, 128, 36, 0);
  }
  40% {
    background: rgba(244, 128, 36, 0.5);
  }
  60% {
    background: rgba(244, 128, 36, 1);
  }
  80% {
    background: rgba(255, 255, 255, 1);
  }
  100% {
    background: rgba(244, 128, 36, 1);
  }
}


/*Кнопка пуска*/

.button {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  border-radius: 100%;
  background-color: white;
  border: 1px solid rgba(244, 128, 36, 1);
}

.button:before {
  content: "";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  border-radius: 100%;
  background-color: rgba(244, 128, 36, 1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Общий контейнер-->
<div class="container">
  <!--Корзина-->
  <div class="basket"><span></span><span></span><span></span><span></span><span></span></div>
  <!--Линии-->
  <div class="line"><span></span><span></span><span></span><span></span><span></span></div>
</div>
<!--Кнопка пуска-->
<div class="button"></div>

MoloF · Answer 5 · 2020-02-23T06:30:43Z

使用GSAP的解决方案。

使用的方法：

查询选择器
总长度
设置属性
gsap.timeline (gsap)
gsap.fromTo (gsap)
时间线 .add (gsap)
时间线 .play (gsap)
时间线 .reverse (gsap)
添加事件监听器

基于来自Alexandr_TT的完成向量

const element = document.querySelector('svg');
const basket = document.querySelector('.basket');
const lines = document.querySelectorAll('.line');
const basketLength = basket.getTotalLength();
let onStart = false;

basket.setAttribute('stroke-dasharray', basketLength);

const timeLine = new gsap.timeline({
	paused: true,
	onStart: () => onStart = true,
	onComplete: () => timeLine.reverse(),
	onReverseComplete: () => onStart = false
});

const animateBackground = gsap.fromTo(
	element,
	{
		backgroundColor: '#ccc',
		duration: 1,
		cursor: 'pointer'
	},
	{
		backgroundColor: 'transparent',
		duration: 1,
		cursor: 'default'
	}
);
timeLine.add(animateBackground);

const animateBasket = () => {
	const tl = new gsap.timeline();

	const drawStroke = gsap.fromTo(
		basket,
		{ strokeDashoffset: basketLength, fill: 'none' },
		{ strokeDashoffset: 0, duration: 3, ease: "power1.inOut" }
	);
	const fillBasket = gsap.fromTo(
		basket,
		{ fill: 'none' },
		{ fill: '#bcbbbb', stroke: 'transparent', duration: 3, ease: "power2.inOut" }
	);
	tl.add(drawStroke);
	tl.add(fillBasket);
	return tl;
}

const animateLines = () => {
	const tl = new gsap.timeline();
	lines.forEach((line, i) => {
		const animate = gsap.fromTo(
			line,
			{ opacity: 0, scale: 0.9 },
			{
				opacity: 1,
				scale: 1,
				duration: 0.5,
				ease: "back.out(15)",
				transformOrigin: 'center'
			}
		);
		tl.add(animate, '-=0.35');
	});
	return tl;
}

timeLine.add(animateBasket());
timeLine.add(animateLines(), '-=1.8');

element.addEventListener('click', () => {
	if (!onStart) timeLine.play(0);
});

body {
	margin: 0;
	padding: 0;
}

svg {
	width: 50vw;
	min-width: 240px;
	background-color: #ccc;
}

svg path:first-child {
	fill: #bcbbbb;
	stroke: #bcbbbb;
	stroke-width: 1;
}

svg path:not(:first-child) {
	fill: #f48023;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.0/gsap.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 12 120 120">
	<path class="basket" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/>
	<path class="line" d="M38 86H76.6V78.3H38V86Z" />
	<path class="line" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" />
	<path class="line" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" />
	<path class="line" d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" />
	<path class="line" d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" />
</svg>

Monkey Mutant · Answer 6 · 2020-02-24T10:27:06Z

为微笑添加物理

#btn{
  cursor: pointer;
}

#btn rect{
  fill: #0095ff;
}

#btn text{
  fill: #fff;
}

#btn:hover rect{
  fill: #0800ff;;
}

.bottom{
  fill: rgb(188,187,187);
  transform: translateX(10px);
}

.bottom-line{
  fill: none;
  stroke: red;
  transform: translateX(10px);
}

rect{
  fill: rgb(244,128,36);
}

#path{
  fill:none;
  stroke:none;
}

.rects{
  width: 23px;
  height: 100px;
  stroke: none;
}

<svg width="150" viewBox="40 0 220 290" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="btn">
  <rect width="100" height="40"  ry="4" x="38%"/>
  <text x="105" y="28">Старт</text>
</g>
 <g> 
    <rect class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.85" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>
  <rect class="rects">
    <animateMotion dur="1s" 
                   repeatCount="1" 
                   calcMode="linear" 
                   rotate="auto" 
                   keyPoints="0.9; 1; 0; 0.70" 
                   keyTimes="0; 0.25; 0.75; 1" 
                   fill="freeze"
                   begin="btn.click"\>
          <mpath xlink:href="#path" />
    </animateMotion>
  </rect>  
     <rect class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.55" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>  
  <rect class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.40" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>  
 <rect  class="rects">
      <animateMotion dur="1s" 
                     repeatCount="1" 
                     calcMode="linear" 
                     rotate="auto" 
                     keyPoints="0.9; 1; 0; 0.25" 
                     keyTimes="0; 0.25; 0.75; 1" 
                     fill="freeze"
                     begin="btn.click"\>
            <mpath xlink:href="#path" />
      </animateMotion>
  </rect>    
  </g>
  
  
  
 <path d="M 39.989896,216.33981 H 60.40061 v 34.01786 h 140.60728 v -34.01786 h 20.41071 v 52.91666 H 40.745849 Z" class="bottom" opacity="0">
   <animate attributeName="opacity" 
           values="0;0.5;1" 
           dur="1s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>  
  </path>
  
 <path d="M 39.989896,216.33981 H 60.40061 v 34.01786 h 140.60728 v -34.01786 h 20.41071 v 52.91666 H 40.745849 Z" stroke-dasharray="0 100" class="bottom-line"> 
  <animate attributeName="stroke-dasharray" 
           values="0 1000; 700 0 " 
           dur="2s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>
    <animate attributeName="stroke" 
           values="rgb(188,187,187); #ccc" 
           dur="2.3s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>
      <animate attributeName="stroke-width" 
           values="7;2" 
           dur="2.3s" 
           begin="btn.click"
           repeatCount="1"
           fill="freeze"/>
</path>
  
 <path d="M260,100  Q180,150 193,240"  id="path"/>
</svg>

如何创建动画 Stackoverflow 图标

恭喜 UModel 竞赛获胜者

和塞瓦斯托波尔复选标记的所有者

仅 CSS...

SVG 解决方案

CSS + jQuery 解决方案

如何从列表中打印最大元素（str 类型）的长度？

如何在 PyQT5 中清除 QFrame 的内容

如何将具有特定字符的字符串拆分为两个不同的列表？

导航栏活动元素

是否可以将文本放入数组中？[关闭]

如何一次用多个分隔符拆分字符串？

如何通过 ClassPath 创建 InputStream？

在一个查询中连接多个表

对列表列表中的所有值求和

如何对齐 string.Format 中的列？

如何创建动画 Stackoverflow 图标

恭喜 UModel 竞赛获胜者

和塞瓦斯托波尔复选标记的所有者

6 个回答

仅 CSS...

SVG 解决方案

CSS + jQuery 解决方案

相关问题