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

所以我有这个动画（触发悬停）。 - >Morph Animation on CodePen CSS“剪辑路径”变形动画在Chrome和Firefox中不起作用，在Safari中完美运行

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

来源

2015-05-12 Martin Velchevski

由于这一刻，剪辑路径的aren't that well supported，但。我自己也遇到了很多问题，并且我没有针对剪辑路径的所有问题的解决方案。我知道的是做的，overflow: hidden有时可以保存一天。那么，在这种情况下，有50％。

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

选项2：从.shape-container:hover .shape:after中删除转换。此时，“感叹号与复选标记”动画效果不错。

缺点是这两个不能出于某种原因组合。而选项2并没有给出正确的结果，虽然你可以通过硬编码180度左右的旋转中心（然后你可以将8px向下移动，因为这就是你也翻译的）的多边形点180deg，来旋转180deg复选标记的形状。

虽然我确实有解决方案。在过去的几个小时里，我一直试图用为得到广泛支持的东西重新制作笔。你可以看看this Fiddle。

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

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

来源

2016-01-08 01:30:50

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

回答

相关问题