CSS 'clip-path' 变形动画在 Chrome 和 Firefox 中不起作用，在 Safari 中完美运行

Question

所以我有这个动画(悬停时触发)。 --> Morph Animation on CodePen

在 Safari 中运行非常流畅，在 Chrome 中运行起来非常不和谐，但在 Firefox 中根本无法运行。

如果有人能指出正确的方向，我将不胜感激。这甚至可以通过某种方式解决吗？

代码:

HTML:

<div class="shape-container">
  <div class="shape"></div>
</div>

SCSS:

$globalWidth: 48px;
$globalHeight: 48px;

$zenGreen: #38CA4B;
$zenRed: #F32847;

@mixin transition($duration) {
  transition: all $duration cubic-bezier(0.785, 0.135, 0.150, 0.860);;
}

@mixin shapeStroke() {

}

/* Center the demo */
html, body { height: 100%; background: #008ace;}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.shape-container {
  width: $globalWidth;
  height: $globalHeight;
  @include transition(600ms);
  &:hover {
    @include transition(600ms);
    transform: rotateZ(-180deg);
    .shape {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      transform: scaleX(1);
      &:before {
        clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
        background: $zenGreen;
      }
      &:after {
clip-path: polygon(25% 48%, 43% 62%, 75% 20%, 89% 31%, 75% 49%, 61% 68%, 45% 87%, 14% 61%);
        transform: rotateZ(180deg) translateY(8px);
      }
    } 
  }
}

.shape {
  width: $globalWidth;
  height: $globalHeight;
  background: white;
  clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
  @include transition(600ms);
  transform: scaleX(1.2);
  position: relative;
  &:before {
    @include transition(600ms);
    content: "";
    display: block;
    background: $zenRed;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 10%, 50% 10%, 92% 95%, 8% 95%);
  }
  &:after {
    @include transition(600ms);
    content: "";
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 20px;
    left: 12px;
    z-index: 1000;
    clip-path: polygon(41% 10%, 57% 10%, 57% 50%, 41% 50%, 41% 57%, 56% 57%, 57% 73%, 41% 73%);
    background: white;
  }
}

Answer 1

截至目前，clip-path 的 aren't that well supported ， 然而。我自己遇到了很多问题，而且我没有解决 clip-path 的所有问题的方法。我做 知道的是，overflow: hidden 有时可以挽救局面。好吧，在这种情况下是 50%。

选项 1:将 overflow: hidden 添加到 .shape。此时，“三 Angular 形到方框”动画在 Chrome 中运行良好。

选项 2:从 .shape-container:hover .shape:after 中删除转换。此时，“感叹号到复选标记”动画将正常工作。

缺点是这两者出于某种原因不能组合。选项 2 没有给出正确的结果，尽管您可以通过围绕旋转中心硬编码测谎点 180 度来将复选标记的形状旋转 180 度(然后您可以向下移动 8 像素，因为这也是您翻译的内容)。

不过，我确实有一个解决方案。在过去的几个小时里，我一直在尝试用 得到广泛支持的东西来改造您的笔。你可以看看this Fiddle .

我已将包含元素更改为内部带有多边形的 svg 元素，它始终保持相同的笔画宽度。它的动画是由一小段 JavaScript 触发的。还有，感叹号和复选标记的动画和你的完全不同，但我觉得它看起来很整洁。

虽然这是一个迟到的答案，但我希望它仍然对你有帮助。