CSS動畫工作的Chrome，但不是在Safari

下面的代碼工作正常在Chrome，而不是在Safari：CSS動畫工作的Chrome，但不是在Safari

@-webkit-keyframes jiggle { 
    0% { 
     transform: rotate(-.5deg); 
     -webkit-animation-timing-function: ease-in; 
    } 
    50% { 
     transform: rotate(1deg); 
     -webkit-animation-timing-function: ease-out; 
    } 

} 

.animated_container { 
    -webkit-animation-name: jiggle1; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transform-origin: 50% 40%; 
    -webkit-animation-duration: 0.21s; 
    -webkit-animation-delay: -0.43s; 
    animation-name: jiggle1; 
    animation-iteration-count: infinite; 
    transform-origin: 50% 40%; 

}

我創建了這個小提琴的例子：

我在想什麼這裏？謝謝！

來源

2014-10-07 Rafouille

並非所有的CSS都適用於所有瀏覽器？ – jbutler483 2014-10-07 15:54:17

不只是在這裏顯示的CSS的相關部分...完整的CSS是在小提琴。 – Rafouille 2014-10-07 15:57:16

我的意思是：僅僅因爲它在一個瀏覽器中工作，另一個可能會以不同的方式呈現它。我無法在我的電腦atm上測試它，但試試[this]（http://htmlcsstricks.com/demo/61-css3-animation-effects/css3-wobble-animation.html） – jbutler483 2014-10-07 16:00:30

這是因爲您沒有在轉換百分比上設置完整範圍。 Safari要求您指定100％端點。看到這個相關的答案：CSS3 animation not working in safari

來源

2014-10-07 16:43:23 Duncan

非常感謝鄧肯，就是這樣！我在這裏更新了提琴：http://jsfiddle.net/2obx0rvL/4/ – Rafouille 2014-10-07 17:39:53

-3

您只使用webkit.prefix。您必須再次編寫代碼而不使用webkit前綴，以便其他瀏覽器（如Safari，Internet Explorer或Firefox）可以使用它。

@-webkit-keyframes jiggle { 
0% { 
    transform: rotate(-.5deg); 
    -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; 
} 
50% { 
    transform: rotate(1deg); 
    -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; 
} 

} 

.animated_container { 
    -webkit-animation-name: jiggle1; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-transform-origin: 50% 40%; 
    -webkit-animation-duration: 0.21s; 
    -webkit-animation-delay: -0.43s; 
    animation-name: jiggle1; 
    animation-iteration-count: infinite; 
    transform-origin: 50% 40%; 
    animation-duration: 0.21s; 
    animation-delay: -0.43s; 

}

來源

2014-10-07 15:55:30 Kommodore

Safari是一個基於webkit的瀏覽器。 – 2014-10-07 15:56:14

好吧，對不起，那麼後。我對safari不太熟悉，這就是爲什麼我認爲它是基於其他方面的。 – Kommodore 2014-10-07 15:59:45

這篇文章應該刪除。您提供了您不確定的信息，但無法回答這個問題。 – krummens 2017-04-13 18:48:30

CSS動畫工作的Chrome，但不是在Safari

回答

相關問題