追加css3 @keyframes無法在safari中工作

這很難解釋，所以請原諒我，如果我漫不經心的話。追加css3 @keyframes無法在safari中工作

與js/jquery我創建一個樣式追加到文檔頭一旦我可以確定將包含動畫元素的寬度。例如，我有一些雲在天空中滑動，所以我需要知道視區有多寬，以便用動畫覆蓋整個屏幕。一旦我有我正在追加head元素與它這樣定義的樣式變量（風格）：

$('html > head').append(style);

這完全在Chrome和Firefox，但Safari的直線上升拒絕工作。我嘗試了一個稍微不同的方式：

$('head').append('<style type="text/css">*@keyframe attributes here*</style>');

再次，在鉻和firefox中工作正常，但safari沒有看到它。之前你問，是的，我使用-webkit-供應商的前綴，是的，它在非供應商特定的@keyframes屬性之前列出:)

所以然後我試着jquery關鍵幀插件與完全相同的結果。它可以在Chrome和Firefox中完美工作，但不是徒步旅行。但僅限於關鍵幀。

我已經搜查，搜查了別人這個問題，但所有我能找到的關於確保使用正確的順序正確的供應商前綴（我做了）無數的線程。

，如果我硬編碼的關鍵幀到CSS文件，他們工作得很好，但很明顯，做我沒有好，因爲我不能指定動畫適當的寬度。我需要處理寬度（不是％），因爲循環動畫和偏移量（它很複雜）。

編輯這裏是我追加到標題的樣式var的示例。也許safari是格式化的特別？

<style> 
@-webkit-keyframes charmove { from { -webkit-transform : translateX(0px); } to { -webkit-transform : translateX('+winWidth+'px); }} 
@keyframes charmove { from { transform : translateX(0px); } to { transform : translateX('+winWidth+'px); }} 
</style>

我試過了，也沒有在變換元素上添加-webkit。相同的結果。

來源

2015-04-23 Buck Russell

yup。我也是這樣做的。試過兩種方法。 –

使用Razor視圖引擎，或得到任何控制檯錯誤，我不認爲？ – jbutler483

控制檯沒有錯誤。它只是忽略了附加規則。 –

好吧，我想通了（並得到了一些更多的白髮！）

原來，當你將它們定義你的動畫元素的Safari瀏覽器將無法讀取短手動畫屬性。

所以不是：你所要做的

-webkit-animation: 5s *name-of-anim* infinite linear;

：

-webkit-animation-name: charmove; 
-webkit-animation-duration: 20s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear;

我曾試圖以前（早在這個噩夢），但沒有奏效。我想我在測試它時必須做一些其他的錯誤，因爲它現在正在工作。

希望這篇文章可以幫助別人，因爲谷歌是基本沒有幫助，可能與這個問題作鬥爭。

來源

2015-04-23 19:04:53

我還應該添加一些我剛發現的東西。我已經包含jquery.keyframes插件來測試它是否會起作用（當時沒有）。奇怪的是，我沒有使用該js文件中的任何內容，但除非將其包含在頁面中，否則動畫在safari中不起作用。不知道爲什麼（或者甚至有可能），但這是我在這裏看到的。 –

追加css3 @keyframes無法在safari中工作

回答

相關問題