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

【问题标题】：CSS 'clip-path' morph animation doesn't work in Chrome and Firefox, works flawlessly in SafariCSS 'clip-path' 变形动画在 Chrome 和 Firefox 中不起作用，在 Safari 中完美运行
【发布时间】：2015-07-23 13:08:13
【问题描述】：

所以我有这个动画（悬停时触发）。 --> 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;
  }
}

【问题讨论】：

标签： css css-animations clip-path

【解决方案1】：

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

选项 1：将 overflow: hidden 添加到 .shape。此时，'triangle-to-box' 动画在 Chrome 中运行良好。

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

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

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

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

虽然这是一个较晚的答案，但我希望它仍然可以帮助您。

【讨论】：