CSS“剪辑路径”变形动画在Chrome和Firefox中不起作用，在Safari中完美运行

So I have this animation (triggers on hover). --> Morph Animation on CodePen

所以我有这个动画(悬停时触发)。 - > CodePen上的变形动画

Works amazingly smooth in Safari, it's amazingly jarring in Chrome but it doesn't work at all in Firefox.

在Safari中工作非常流畅,它在Chrome中令人惊讶地震撼,但它在Firefox中根本不起作用。

I would appreciate if someone could point me in the right direction. Is this even fixable in some way?

如果有人能指出我正确的方向,我将不胜感激。这在某种程度上是否可以解决?

Code:

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;
  }
}

1 个解决方案

#1

As of this moment, clip-path's aren't that well supported, yet. I've had a lot of problems with it myself, and I don't have a solution for all of the problems with clip-path. What I do know, is that overflow: hidden can sometimes save the day. Well, 50% of it in this case.

截至目前,剪辑路径尚未得到很好的支持。我自己遇到了很多问题,而且我没有针对clip-path的所有问题的解决方案。我所知道的是,溢出:隐藏有时可以挽救这一天。嗯,在这种情况下,它的50%。

Option 1: add overflow: hidden to .shape. At this point, the 'triangle-to-box' animation works fine in Chrome.

选项1:添加溢出:隐藏到.shape。此时,“三角到盒子”动画在Chrome中运行良好。

Option 2: remove the transform from .shape-container:hover .shape:after. At this point, the 'exclamation mark-to-check mark' animation will work fine.

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

The downside is that these two are not combinable for some reason. And option 2 doesn't give the right result, although you could rotate the shape of the check mark 180deg by hardcoding the polygraph points 180deg around the center of rotation (which you could then shift 8px down, because that's what you also translate).

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

I do have a solution, though. For the last couple hours, I've been trying to remake your pen with things that are widely supported. You can take a look at this Fiddle.

不过,我确实有一个解决方案。在过去的几个小时里,我一直在尝试用广泛支持的东西重新制作你的笔。你可以看看这个小提琴。

I've changed the containing element to be an svg element with a polygon inside, that always keeps the same stroke-width. Its animation is triggered by a little piece of JavaScript. Also, the animation of the exclamation and check mark is completely different from yours, but I think it looks neat.

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

Although this is a late answer, I hope it still helps you.

虽然这是一个迟到的答案,但我希望它仍然可以帮助你。

#1