0
У меня есть 11 кадров png spritesheet. Когда вы наводите курсор, он будет воспроизводить анимацию до последнего кадра, а затем приостанавливаться, а когда вы наводите курсор, он отменит анимацию до первого кадра. У меня это до сих пор:Пауза и обратная анимация CSS при зависании
.intern {
width: 328px;
height: 187px;
background-image: url("http://i.imgur.com/zNsJCnM.png");
-webkit-animation: in 0.5s steps(11);
}
.intern:hover {
-webkit-animation: out 0.5s steps(11);
}
@-webkit-keyframes in {
from {
background-position: 0px 0px;
}
to {
background-position: 0px -2057px;
}
}
@-webkit-keyframes out {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -2057px;
}
}<div class="intern"></div>JS Fiddle:http://jsfiddle.net/os2jm4h5/
Может кто-нибудь помочь мне? Я хотел бы сделать это с помощью CSS (без JavaScript) и желательно использовать только один div.
Пожалуйста, включите ваш код, а не только ссылку jsfiddle. Кроме того, пока вы говорите, что хотите, и, по-видимому, имеете некоторый код, вы не даете понять, что делает ваш код * в настоящее время *, и каким образом (ей) он отсутствует. Вы можете суммировать свою проблему? –
Я не думаю, что вы можете это сделать, потому что в CSS есть только 2 состояния: нормальное состояние и состояние зависания. Вы не можете манипулировать этим с помощью CSS. CSS не имеет возможности смотреть, когда пользователь отталкивает свою мышь от изображения и останавливает анимацию в определенный момент и завершает анимацию. У вас есть javascript для этого. – Rotan075