CSS3關鍵幀動畫不起作用

我使用css3從左到右使用Keyframes動畫爲動畫創建動畫。任何人幫助？如何解決這個問題？CSS3關鍵幀動畫不起作用

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
</head> 
<style> 
#adam{ 
    background:url(adam.png); 
    width: 120px; 
    height: 180px; 
    animation: walk-east 1.0s steps(8) infinite; 
} 
@keyframes walk-east { 
    from { background-position: 0px; } 
    to { background-position: -960px; } 
} 
</style> 
<body> 

<div id="adam"></div> 


<body> 
</html>

https://www.adamkhoury.com/demo/sprite_sheets/adam.png

來源

2015-01-11 Dj.Sunrise

什麼瀏覽器是你嗎？ –

工作得很好。希望你包含瀏覽器前綴。 [Fiddle]（http://jsfiddle.net/dvnc0804/） – Harry

[爲什麼\ [CSS功能\]可以在\ [browser \]中工作，但在其他工作環境中工作？]（http：// stackoverflow。 COM /問題/ 25110510 /爲什麼 - 犯規 - CSS-功能，工作在瀏覽器中，但是，工程功能於他人） – Harry

你缺少-webkit-前綴。

Browser compatibility table for @keyframes。

#adam { 
 
    background: url(https://www.adamkhoury.com/demo/sprite_sheets/adam.png); 
 
    width: 120px; 
 
    height: 180px; 
 
    -webkit-animation: walk-east 1.0s steps(8) infinite; 
 
    animation: walk-east 1.0s steps(8) infinite; 
 
} 
 
@-webkit-keyframes walk-east { 
 
    from { 
 
    background-position: 0px; 
 
    } 
 
    to { 
 
    background-position: -960px; 
 
    } 
 
} 
 
@keyframes walk-east { 
 
    from { 
 
    background-position: 0px; 
 
    } 
 
    to { 
 
    background-position: -960px; 
 
    } 
 
}

<div id="adam"></div>

來源

2015-01-11 15:24:30

CSS3關鍵幀動畫不起作用

回答

相關問題