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 \] работает в \ [браузере \], а работает в других?] (Http: // stackoverflow. ком/вопросы/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 Кадровая анимация не работает

ответ

Смежные вопросы