转换原点的关键帧动画问题答案

【问题标题】：Keyframe animation issue with transform-origin转换原点的关键帧动画问题
【发布时间】：2022-07-22 21:03:02
【问题描述】：

我正在尝试制作用于打开汉堡菜单的动画。我正在努力将汉堡送到 x。从理论上讲，我似乎做的一切都是正确的，但结果告诉我不然 xD。我一直在玩转翻译值和转换原点，但它们都以（对我而言）出乎意料的方式表现。有人可以帮我看看吗？

我的例子：https://codepen.io/aki-sol/pen/RwMoEJQ

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" 
xmlns="http://www.w3.org/2000/svg">
  <rect class="top" y="8.5" width="48" height="3.875" fill="blue" />
  <rect class="middle" y="22.0625" width="48" height="3.875" fill="blue" />
  <rect class="bottom" y="35.625" width="48" height="3.875" fill="blue" />
</svg>

svg:hover .top {
  animation-name: top;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  /*transform-origin: 25% 25%;*/
  animation-fill-mode: forwards;
}
svg:hover .middle {
  animation-name: middle;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  transform-origin: center center;
  animation-fill-mode: forwards;
}
svg:hover .bottom {
  animation-name: bottom;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  /*transform-origin: 25% 25%;*/
  animation-fill-mode: forwards;
}

@keyframes top {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30%);
  }
  100% {
    transform: rotate(45deg) translateY(-25%);
  }
}
@keyframes middle {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30%);
  }
  100% {
    transform: rotate(-45deg);
  }
}

目标（第一个示例）：https://codepen.io/vineethtrv/pen/VYRzaV

谢谢！

【问题讨论】：

标签： css css-animations css-transforms keyframe

【解决方案1】：

也许您可以使用 DevTools 中的值。尝试用箭头键轻推它以使其到达您喜欢的位置。我得到了以下信息：

svg:hover .top {
  transform-origin: 4% 28%;
}

svg:hover .bottom {
  transform-origin: 5% 50%;
}

【讨论】：

【解决方案2】：

我稍微改变了尺寸以使值更易于计算。

修正后的演示是这样的：

svg:hover .top {
  animation-name: top;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  transform-origin: 24px 10px;
  animation-fill-mode: forwards;
}
svg:hover .middle {
  animation-name: middle;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  transform-origin: center center;
  animation-fill-mode: forwards;
}
svg:hover .bottom {
  animation-name: bottom;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  transform-origin: 24px 38px;
  animation-fill-mode: forwards;
}

@keyframes top {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30%);
  }
  100% {
    transform:  translateY(30%) rotate(45deg);
  }
}
@keyframes middle {
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes bottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(-30%) rotate(-45deg);
  }
}

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect class="top" y="8" width="48" height="4" fill="blue" />
  <rect class="middle" y="22" width="48" height="4" fill="blue" />
  <rect class="bottom" y="36" width="48" height="4" fill="blue" />
</svg>

【讨论】：