CSS動畫在Safari中無法工作，但在Chrome和Firefox

精細

我使用SASS，這裏是我使用CSS動畫在Safari中無法工作，但在Chrome和Firefox

@mixin keyframes($animation-name) { 
    @-webkit-keyframes $animation-name { 
    @content; 
    } 
    @-moz-keyframes $animation-name { 
    @content; 
    } 
    @-ms-keyframes $animation-name { 
    @content; 
    } 
    @-o-keyframes $animation-name { 
    @content; 
    } 
    @keyframes $animation-name { 
    @content; 
    } 
} 

@mixin transition() { 
    -webkit-transition: all 300ms ease-in-out; 
    -moz-transition: all 300ms ease-in-out; 
    -ms-transition: all 300ms ease-in-out; 
    -o-transition: all 300ms ease-in-out; 
    transition: all 300ms ease-in-out; 
} 

@mixin animation($str) { 
    -webkit-animation: #{$str}; 
    -moz-animation: #{$str}; 
    -ms-animation: #{$str}; 
    -o-animation: #{$str}; 
    animation: #{$str};  
} 

@include keyframes(fadein) { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

.fadein { 
    @include transition; 
    @include animation('0.5s ease-in-out .7s normal forwards 1 running fadein'); 
}

這在Firefox和Chrome正常工作的代碼，但它不執行蘋果瀏覽器。我試圖用百分比值的關鍵幀裏面像

0% {opacity: 0;} 
100% {opacity: 1;}

但這並沒有任何解決它。

在Safari中的控制檯將出現在CSS動畫線感嘆號，那麼這裏就是

截圖還有什麼問題呢？

來源

2015-10-13 Jeff

「transition」和「animation」的代碼是什麼樣的？ – cocoa

對不起，我編輯了這個問題。 – Jeff

我認爲問題出在我傳遞給@include animation（）的參數上。事實上，它應該看起來像這樣「淡入淡出1.5s」。我花了一個小時試圖弄清楚這一點，顯然我在SO發佈問題後發現了它。 – Jeff

對不起，我沒有檢查動畫屬性語法之前問這裏之前。我以爲我是對的..！它應該是

@include animation('fadein .5s ease-in-out .7s forwards');

來源

2015-10-13 16:01:00 Jeff

CSS動畫在Safari中無法工作，但在Chrome和Firefox

回答

相關問題