Создайте анимацию изображения с помощью CSS3.

OlgaB1

Хорошо. У меня есть превью-изображение из видеофайла, которое по сути представляет собой одно сплошное (очень широкое) изображение со скриншотами кадров из видео.

Это была часть какой-то сложной ерунды, связанной с javascript, и я подумал - это можно сделать только с помощью CSS - по крайней мере, я так думаю.

На дисплее изображение отображается с первым (крайним левым) кадром.

Я хочу, чтобы как только вы наводили курсор на изображение, оно начинало прокручиваться вправо, по одному кадру, желательно зацикливаться в конце, но это не является строго необходимым.

Ширина рамок известна, так что проблема не в этом.

Однако я немного в растерянности: возможно ли это с помощью CSS3? Если да, есть ли у кого-нибудь что-нибудь подобное, о чем я могу прочитать? Я не очень хорошо разбираюсь в анимации CSS3, поэтому некоторые руководства могут помочь.

Я пробовал гуглить, но в основном нахожу обычные слайдеры, основанные на нескольких изображениях, которых у меня нет.

SocialMedia

[добавление] Как и вы, я не разбираюсь в CSS-анимации.

Я работал с ним достаточно долго, чтобы он у меня работал, но проблема в том, что анимация меня раздражает.

Под раздражением я подразумеваю, что он сосет задний сосок кабана. Мне вспоминается персонаж Хайнлайна, обсуждавший юмор.

Есть смешные всегда шутки, а есть смешные когда-то. Анимация - это смешная шутка. Гэри

Колян3

Спасибо! На самом деле это была очень хорошая отправная точка.

Поскольку я собираюсь использовать это для нескольких разных изображений на одной странице, мне нужно внести некоторые незначительные изменения, но, похоже, это именно то, что мне нужно.

Нужно придумать, как сделать так, чтобы некоторые атрибуты назначались динамически, но это не должно быть слишком сложно.

Еще раз спасибо!

Данил3

Дополнительный пример, который выглядит связанным:
http://jsfiddle.net/simurai/CGmCe/

Но CSS-анимация-play-state также должна присутствовать, чтобы сделать ее управляемой:

 .hi {


width: 50px;


height: 72px;


background-image: url("[URL='https://lumtu.com/yti/bw55wbmdodHRwOi8vcy5jZHBuLmlvLzc5L3Nwcml0ZS1zdGVwcywVG']http://s.cdpn.io/79/sprite-steps.png[/URL]");


animation: myanim 5s steps(10) infinite;


animation-play-state: paused;


}


@keyframes myanim {


from { background-position: 0px; }


to { background-position: -500px; }


}


.hi:hover{


animation-play-state:running;


}

Код (CSS): Ссылки:

Похожие темы	Дата
Технический вопрос по визиткам	19.10.2024, 18:10
Помощь по дизайну	19.10.2024, 18:10
Как обрезать иконку в paint.NET?	19.10.2024, 18:10
Как вам дизайн сайта	19.10.2024, 18:10
Как исключить категорию из get_the_category?	19.10.2024, 18:10
Blogger Blog Требуется специальный код	19.10.2024, 18:10
ищу блок контента для всех моих сайтов как один и тот же блок	19.10.2024, 18:10
В чем суть блоггерства?	19.10.2024, 18:10
Старые плохие времена дешевого копирайтинга прошли!	19.10.2024, 18:10
Ищу совет по созданию блога	19.10.2024, 18:10

Создайте анимацию изображения с помощью CSS3.

OlgaB1

SocialMedia

Колян3

Данил3

I AM

Интересно