-chbkit-animation-play狀態在Chrome瀏覽器中被忽略，但在safari中有效？

DEMO - 這是一個類似於我在我的網站中使用的動畫的鏈接。我發現在Safari中，動畫延遲了指定時間的運行。然而在Chrome中，動畫直接射擊，就好像動畫播放狀態被忽略一樣。-chbkit-animation-play狀態在Chrome瀏覽器中被忽略，但在safari中有效？

我在觀看它的Chrome版本33.0.1750.152

了大量的研究後，我設法找到這個stack overflow（所以我知道我不會瘋了），但它從來沒有真正解決，我希望有人可能知道一個解決辦法，或者如果我使用的CSS有問題？

奇怪的是，在我的網站中有其他css3動畫，他們應該正常工作。

.one{ 
    background-color: red; 
    opacity: 0; 
    -webkit-animation: one 45s infinite cubic-bezier(0.23, 1, 0.32, 1); 
    -webkit-transform: scale(1); 
    -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 
    -webkit-transition-duration: 0.01s; 
    -webkit-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    animation-play-state: paused; 
    z-index: 4; 
} 

@-webkit-keyframes one { 
0% { opacity: 0; 
    -webkit-transform: scale(1); 
} 
1%{ 
    -webkit-transform: scale(1.2); 
} 
2%{ 
    -webkit-transform: scale(1); 
    opacity: 1; 
} 
15%{ 
    -webkit-transform: scale(1); 
    opacity: 1; 
} 
20% { 
    -webkit-transform: scale(1); 
    opacity: 0; 
} 

25% { opacity: 0; } 
30% { opacity: 0; } 
35% { opacity: 0; } 
40% { opacity: 0; } 
45% { opacity: 0; } 
50% { opacity: 0; } 
55% { opacity: 0; } 
60% { opacity: 0; } 
65% { opacity: 0; } 
70% { opacity: 0; } 
75% { opacity: 0; } 
80% { opacity: 0; } 
85% { opacity: 0; } 
90% { opacity: 0; } 
95% { opacity: 0; } 
100% { opacity: 0; } 
}

來源

2014-03-27 user2498890

請看帖子。感謝分享。希望這可以幫助 – guest271314

張貼包含在原始帖子的JavaScript/jquery件也許是有幫助的。

的JavaScript（jquery）件從原來的職位掛鉤的jsfiddle（http://jsfiddle.net/PB4BB/165/）嘗試在jquery.css()object訪問"animation-play-state"屬性，即

在http://jsfiddle.net/PB4BB/165/在原帖鏈接：

`$ （「.one，.two，.three，.four」）。css（{「animation-play-state」：「running」 ..}）

儘管"animation-play-state"不是通過.css()可訪問的jquery對象，至少知道或已經成功訪問該方法，則利用該特定的property表示法。

WebkitAnimationPlayState也許不是jquery對象，也意識到在jQuery的來源。 DOMelementstyle也許在那裏存在WebkitAnimationPlayStateproperty。如果利用jquery$(selector)來訪問DOMelement來設置animationPlayState，可能嘗試$(selector).get()或$(selector)[0]。

試試這個

$(".one").get(0).style.WebkitAnimationPlayState = "running";

的jsfiddle http://jsfiddle.net/guest271314/UJ728/

感謝分享。

希望這會有所幫助

來源

2014-03-28 02:00:25 guest271314

-chbkit-animation-play狀態在Chrome瀏覽器中被忽略，但在safari中有效？

回答

相關問題