如何合理地制作字体超赞锁定图标的动画

我想知道如何分别将Font Awesome Lock Icon和Font Awesome Lock Open Icon交织在一起，同时以某种方式智能地切换/动画它们。例如，有this flip animation。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<div class="fa-5x">
  <i class="fas fa-lock fa-flip" style="--fa-animation-duration: 10s; color: red"></i>
  <i class="fas fa-unlock fa-flip" style="--fa-animation-duration: 10s; color: green"></i>
</div>

例如，现在将两个图标叠加在一起是有意义的，将其中一个设置为display: none，然后在单击或悬停或其他任何地方切换它们。但如何在动画时间过半后切换它们，以便在各个图标只能从侧面看到一条线的时刻进行交换？或者你对合理的动画有更好的想法吗？

---

解决方案

您无法设置两个不同图标的动画来获取unlock effect。但是，如果不重要，您可以创建自己的SVG图标和动画。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

const icon = document.getElementById('icon');
icon.addEventListener('click', () => {
  icon.classList.toggle('green');
});

const icon2 = document.getElementById('icon2');
icon2.addEventListener('click', () => {
  icon2.classList.toggle('green');
})

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

:root {
  --bg: hsl(201, 27%, 10%);
}

body {
  height: 100vh;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items:center;
  gap: 1em;
  position: relative;
}

#icon,
#icon2 {
  width: 52px;
  height: auto;
  position: relative;
  cursor: pointer;
}

#icon rect,
#icon path,
#icon2 path {
  transition: all 0.5s ease-in-out;
}

#icon rect {
  fill: red;
}
#icon2 path#body {
fill: red;
}

#icon path,
#icon2 path#hook {
  stroke: red;
  stroke-dasharray: 30;
  stroke-dashoffset: 5;
  fill: none;
}

#icon.green rect,
#icon2.green path#body {
  fill: green;
}

#icon.green path,
#icon2.green path#hook {
  stroke: green;
  stroke-dasharray: 20;
}

/* keyhole */

#keyhole {
  width: 10px;
  height: 16px;
  border-radius: 25px;
  position: absolute;
  top: 65%;
  left: 50%;
  background-color: var(--bg);
  transform: translate(-50%, -50%) rotate(0deg);
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

#icon.green #keyhole {
  transform: translate(-50%, -50%) rotate(-180deg);
}

<div id="icon">
  <div id="keyhole"></div>
  <svg viewBox="0 0 22 25">
    <rect x="0.505493" y="10.1519" width="21.3777" height="14.2868" rx="3" />
    <path d="M5.73621 10.4592V7.32508C5.73621 4.31064 8.1799 1.86694 11.1943 1.86694V1.86694C14.2088 1.86694 16.6525 4.31064 16.6525 7.32508V10.4592" stroke-width="3.5" />
  </svg>
</div>

<div id="icon2">
  <svg viewBox="0 0 22 25"  xmlns="http://www.w3.org/2000/svg">
    <path id="hook" d="M5.73633 10.4592V7.32508C5.73633 4.31064 8.18002 1.86694 11.1944 1.86694C14.2089 1.86694 16.6526 4.31064 16.6526 7.32508V10.4592" stroke-width="3.5"/>
    <path id="body" d="M3.50537 10.1519H18.8831C20.5399 10.1519 21.8831 11.4951 21.8831 13.1519V21.4387C21.8831 23.0956 20.5399 24.4387 18.8831 24.4387H3.50537C1.84852 24.4387 0.505371 23.0956 0.505371 21.4387V13.1519C0.505371 11.4951 1.84852 10.1519 3.50537 10.1519ZM11.1945 13.9858C10.0865 13.9858 9.18823 14.884 9.18823 15.9921V18.3328C9.18823 19.4408 10.0865 20.3391 11.1945 20.3391C12.3026 20.3391 13.2008 19.4408 13.2008 18.3328V15.9921C13.2008 14.884 12.3026 13.9858 11.1945 13.9858Z"/>
  </svg>
</div>