在動畫中獲取「Invald屬性值」

以下代碼導致動畫屬性的「無效屬性值」，我不知道爲什麼。在動畫中獲取「Invald屬性值」

編輯，完整的代碼

.spinner { 
    animation: rotator 1.4s linear infinite; 
} 

@keyframes rotator { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(270deg); } 
} 

.path { 
    stroke-dasharray: 187; 
    stroke-dashoffset: 0; 
    transform-origin: center; 
    animation: 
    dash 1.4s ease-in-out infinite, 
    colors 5.2s ease-in-out infinite; 
} 

@keyframes colors { 
    0% { stroke: #4285F4; } 
    25% { stroke: #DE3E35; } 
    50% { stroke: #F7C223; } 
    75% { stroke: #1B9A59; } 
    100% { stroke: #4285F4; } 
} 

@keyframes dash { 
0% { stroke-dashoffset: 187; } 
50% { 
    stroke-dashoffset: 46.75; 
    transform:rotate(135deg); 
} 
100% { 
    stroke-dashoffset: 187; 
    transform:rotate(450deg); 
} 
}

我想實現從這個例子採取了微調： http://codepen.io/mrrocks/pen/EiplA

來源

2014-10-08 Steven Harlow

您的前4行語法無效。 – Terry 2014-10-08 20:00:42

他們應該如何糾正？將它們單獨分開而不使用基礎動畫（如動畫延遲，動畫持續時間等）？ – 2014-10-08 20:04:41

如果您在Chrome/Safari瀏覽器，你就必須添加.spinner的-webkit動畫像這樣：

-webkit-animation: rotator 1.4s infinite linear;

你必須做同樣.path：

-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;

SASS會產生animation和-webkit-animation兩個，但你必須手工做他們CSS。

來源

2014-10-08 20:03:59 Mordred

是的，我加了那些。我將發佈整個代碼。一個區別是我使用基本的CSS而不是SASS – 2014-10-08 20:05:55

@StevenHarlow Webkit瀏覽器需要前綴動畫標籤。更新答案與什麼可能是你的問題。 – Mordred 2014-10-08 20:17:55

這解決了無效的財產價值問題，所以我把這個標記爲接受:)我仍然沒有看到我的微調不幸：（ – 2014-10-08 20:42:21

在動畫中獲取「Invald屬性值」

回答

相關問題