Как создать отзывчивую анимацию листа спрайтов в css?

я пытался сделать это в течение нескольких часов, но до сих пор я не добился никакого прогресса.

У меня есть сайт с несколькими анимациями, некоторые из них активируются при клике, а некоторые при наведении. что-то похожее на анимацию, найденную на этом сайте: http://www.pixelwrapped.com/ кошачий хвост является отзывчивым, так как когда вы масштабируете браузер, он также масштабируется вместе с ним.

это код, который я использую для создания анимации

.monster {
            position: absolute;
            width: 100px;
            height: 100px;
            margin: 2% auto;
            background: url('img/le-cloud.png') left center;
            overflow: auto;
            display: block;
            left: 20%;
            top: 40%;

        }
        .monster:hover {
            position: absolute;
            width: 100px;
            height: 100px;
            margin: 2% auto;
            background: url('img/le-cloud.png') left center;
            animation: play .9s steps(18);
            overflow: auto;
            display: block;
            left: 20%;
            top: 40%;

        }

я нашел этот учебник, который использует проценты, который работает для изменения 1 кадра, не воспроизводя все 18 кадров в этом примере, у меня есть другие анимации, состоящие из более чем 30 спрайтов, я просмотрел spritely.js , но он не отвечал.

Любые идеи, как я могу это решить?

Этот вопрос кажется не по теме, потому что он лучше подходит для переполнения стека .
На вашем примере сайта (pixelwarped.com) как только изображение начинает уменьшаться, анимированный хвост скрывается. Это означает, что это не очень отзывчивая анимация. Похоже, они сделали это именно так, потому что было бы сложно масштабировать маленькое изображение листа спрайтов пропорционально большему изображению за ним, сохраняя при этом хвост в правильном положении.
Таким образом, медиа-запросы - единственное возможное решение, я думаю, просто создание 3 разных размеров
Возможно, не единственное решение, но лучшее, что я могу придумать.
Спасибо за предложение, я также рассматривал GIF-файлы, у вас есть какие-либо идеи о плюсах и минусах и будет ли это работать вообще?
@ Винсент Я разместил это в Stackoverflow, хотя там никто не ответил, поправьте меня, если я ошибаюсь, он действительно использует анимацию, поэтому я разместил его здесь, поскольку я спрашивал об этой теме раньше.
Да, линии довольно размыты, и здесь вы, по крайней мере, обязательно привлечете больше внимания.
Проверьте ответ, я узнал, как!
Примечание: вам не нужно повторять все ваши свойства в :hoverсостоянии. Вам просто нужно иметь те, которые вы меняете из исходного состояния
Я голосую за это как не по теме, потому что все решение касается использования CSS. Все еще считаю, что он принадлежит StackExchange.
Я голосую за то, чтобы закрыть этот вопрос как не относящийся к теме, потому что он не касается графического дизайна в рамках, определенных в справочном центре.

Ответы (2)

Я понял, как это сделать в конце концов! На всякий случай, если кому-то все еще не все равно, позвольте мне кое-что объяснить, чтобы вы не проходили через то, через что прошел я:

    <style>
      div.sprite {
            margin: 0 auto;
            width: 40%;
/*            Change this to what ever value you desire*/
            height: 0;
            padding-bottom: 40%;
            background-image: url("le-cloud-copy.png");
/*            Add the sprite sheet here, must be on a staright line*/
            background-position: 0 0;
            background-size: 1800%;
/*            I have 18 sprites in the sheet thus it's 1800%, if it was 4 you'd use 400% and so on*/
            display: block;
        }
        div.sprite:hover {
/*            background-position: 500% 0;*/
            animation: play .9s steps(18);
/*            18 steps to go over al the sprites i have, if you had 4 in the sprite the value would be 4 for example */
        }
        @keyframes play {
            100% {
                background-position: 1800% 0;
            }
        }
    </style>

И волшебство здесь заключается в том, чтобы включить эту библиотеку, и это должно работать.

<script src="js/prefixfree.min.js"></script>
Включение prefixfree для чего-то, что вы можете довольно легко сделать в CSS, кажется излишним: P Если вы уже включаете его для других вещей, это может быть хорошо, но рекомендовать его для чего-то такого короткого — плохая практика.

Попробуйте использовать преобразования scaleи любые точки останова, которые вам нужны. Он поддерживается в IE9 и более поздних версиях, но вы можете эмулировать его в IE < 9, используя zoomсвойство Microsoft. Другие (не легко) возможны с использованием фильтра MS Matrix.

@media(max-width:1024px){
   .monster {
       transform:scale(0.5);
   }
}
Использование scaleдля адаптивного дизайна — плохая практика.
@Zach Saucier - Достаточно интересно, что вы говорите об отзывчивости и использовании масштаба в своей статье CSS-анимации о хитростях CSS, но, похоже, не упоминаете, что это плохая практика. Можете ли вы уточнить это? «К сожалению, проценты не поддерживаются какими-либо свойствами box-shadow, поэтому они не так легко реагируют, как собственный HTML-элемент. Однако их все же можно изменить вручную в анимации или с помощью transform:scale(n) в фактическом HTML-элементе. частью которого они являются».
@Zach Saucier - Было бы неплохо, если бы srcset действительно поддерживался не только веб-набором. Я использовал масштаб и не обнаружил размытости. У вас есть пример? Вы утверждаете, что это происходит при изменении размера браузера или с рабочего стола на мобильный? Если в браузере изменяется размер, большинство пользователей (99,9%) не изменяют размер браузера так, как это делаем мы при тестировании.
Если немного подумать: использование scale()для изображений допустимо, если 1) значение масштаба меньше 1 (больше 1 всегда размыто), 2) изображение позиционировано абсолютно (так что разница в ограничивающей рамке и внешнем виде не имеет значения), 3) производительность не имеет большого значения (было бы лучше загрузить изображение меньшего размера, если требуется только изображение меньшего размера) и 4) если оно сопряжено с любыми другими преобразованиями, оно должно быть сильно проверено, поскольку у браузеров возникают проблемы с определенными типами преобразований, особенно в сочетании друг с другом
Как создать отзывчивую анимацию листа спрайтов в css?
СпросиСетьПолитика конфиденциальности1y, 0v