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。此时，'triangle-to-box' 动画在 Chrome.

中运行良好

选项 2：从 .shape-container:hover .shape:after 中删除转换。此时，'exclamation mark-to-check mark' 动画将正常工作。

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

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

我已将包含元素更改为内部多边形的 svg 元素，它始终保持相同 stroke-width。它的动画是由一小段 JavaScript 触发的。还有，感叹号和复选标记的动画跟你的完全不一样，不过我觉得挺好看的。

虽然回答晚了，但希望对您有所帮助。

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

CSS 'clip-path' morph animation doesn't work in Chrome and Firefox, works flawlessly in Safari

css

css-animations

clip-path