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中完美運行

回答

相關問題