如何在關鍵幀動畫

更新的代碼如何在關鍵幀動畫

<!DOCTYPE> 
<html> 
<head> 
</head> 
<body> 
<h1> first svg try</h1> 
<object type="image/svg+xml" data="svg.svg" id="img">Your browser no support</object> 
</body> 
</html>

與我的SVG文件改變SVG對象的填充：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="215.069px" height="121.917px" viewBox="0 0 215.069 121.917" enable-background="new 0 0 215.069 121.917" xml:space="preserve"><style>.style0{stroke: #FFFFFF;stroke-miterlimit: 10;fill: #231F20; 


}.style0 { 
animation:mymove 5s infinite; 
-webkit-animation:mymove 10s infinite; /* Safari and Chrome */ 
-webkit-transform-origin:center; 
} 

@-webkit-keyframes mymove 
{ 
0%, 100% {-webkit-transform: rotate(0deg); fill: #000000;} 
25% {-webkit-transform: rotate(90deg); fill: #78ab98;} 
50% {-webkit-transform: rotate(180deg); fill: #aa7454;} 
75% {-webkit-transform: rotate(270deg); fill: #123456;} 
} 
</style><style> 
</style><rect width="215.1" height="121.9" class="style0"/></svg>

此代碼實現所期望的轉變，但是當它的矩形旋轉，零件沒有顯示。

來源

2013-10-22 nvncbl

可能重複[如何將樣式應用於嵌入SVG？]（http://stackoverflow.com/questions/4906148/how-to-apply-a- style-to-an-embedded-svg） –

將動畫添加到.style0而不是#img。

.style0 { 
    animation:mymove 5s infinite; 
    -webkit-animation:mymove 10s infinite; 
}

jsFiddle here - 如果你想支持所有瀏覽器做一個keyframe爲-moz。

jsFiddle - 沒有旋轉效果。

更新CSS

.style0 { 
    animation:mymove 5s infinite; 
    -webkit-animation:mymove 10s infinite; 
} 
@-webkit-keyframes mymove { 
    0%, 100% { 
     -webkit-transform: rotate(0deg); 
     fill: #000000; 
    } 
    25% { 
     -webkit-transform: rotate(90deg); 
     fill: #78ab98; 
    } 
    50% { 
     -webkit-transform: rotate(180deg); 
     fill: #aa7454; 
    } 
    75% { 
     -webkit-transform: rotate(270deg); 
     fill: #123456; 
    } 
} 
.style0 { 
    stroke: #FFFFFF; 
    stroke-miterlimit: 10; 
    fill: #231F20; 
}

的

來源

2013-10-22 21:30:43

沒有工作。之前我曾嘗試過類似的結果。任何其他想法？ – nvncbl

@nvncbl你使用什麼瀏覽器？ –

喬希，我使用鉻，雖然我已經嘗試與ie（與其各自的CSS）沒有成功。 – nvncbl

如何在關鍵幀動畫

回答

相關問題