¿Cómo crear una animación de hoja de sprites receptiva en css?

He estado tratando de hacer esto durante horas, pero hasta ahora no he hecho ningún progreso.

Tengo un sitio con algunas animaciones, algunas se activarán al hacer clic y otras al pasar el mouse. algo similar a la animación que se encuentra en este sitio: http://www.pixelwrapped.com/ la cola de gato responde cuando escalas el navegador, también escala junto con él.

este es el codigo que estoy usando para crear la animacion

.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%;

        }

Encontré este tutorial que usa porcentajes, que funciona para cambiar 1 cuadro sin reproducir los 18 cuadros completos en este ejemplo, tengo otras animaciones compuestas por más de 30 sprites, investigué spritely.js pero no respondía.

¿Alguna idea de cómo puedo resolver esto?

Esta pregunta parece estar fuera de tema porque se ajusta mucho mejor a Stack Overflow .
En su sitio de ejemplo (pixelwarped.com), tan pronto como la imagen comienza a encogerse, la cola animada se oculta. Lo que significa que no es realmente una animación receptiva. Parecería que lo hicieron de esa manera, porque sería difícil escalar la imagen pequeña de la hoja de sprites en proporción con la imagen más grande detrás de ella, manteniendo la cola en la posición correcta.
Supongo que las consultas de medios son la única solución posible, solo hacer 3 tamaños diferentes
Quizás no sea la única solución, pero sí la mejor que se me ocurre.
Gracias por la sugerencia, también consideré Gifs, ¿tiene alguna idea sobre los pros, los contras o si funcionará?
@Vincent lo publiqué en Stackoverflow aunque nadie respondió allí, corrígeme si me equivoco, se aprovecha de las animaciones, así que lo publiqué aquí, ya que pregunté sobre el tema antes.
Sí, las líneas son bastante borrosas, y al menos seguramente obtendrás más atención aquí.
Comprueba la respuesta, ¡descubrí cómo!
Nota al margen: no tiene que reiterar todas sus propiedades en el :hoverestado. Solo necesita tener los que cambia desde el estado inicial
Estoy votando esto como fuera de tema porque toda la solución se trata del uso de CSS. Todavía creo que pertenece a StackExchange.
Voto para cerrar esta pregunta como fuera de tema porque no parece ser sobre diseño gráfico dentro del alcance definido en el centro de ayuda.

Respuestas (2)

¡Descubrí cómo hacerlo eventualmente! En caso de que a alguien todavía le importe, déjame explicarte un poco para que no pases por lo que yo pasé:

    <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>

Y el bit mágico está aquí , incluye esta biblioteca y debería funcionar.

<script src="js/prefixfree.min.js"></script>
Incluir prefixfree para algo que puedes hacer bastante fácilmente en CSS parece una exageración: P Si ya lo estás incluyendo para otras cosas, podría estar bien, pero recomendarlo para algo tan breve es una mala práctica.

Intente usar transformaciones scaley cualquier punto de ruptura que necesite. Es compatible con IE9 y superior, pero se puede emular en IE < 9 usando la zoompropiedad de Microsoft. Otros son (no fácilmente) posibles usando el filtro MS Matrix.

@media(max-width:1024px){
   .monster {
       transform:scale(0.5);
   }
}
Usar scalepara un diseño receptivo es una mala práctica.
@Zach Saucier: curiosamente, habla sobre la capacidad de respuesta y el uso de la escala en su artículo de animación css sobre CSS Tricks, pero no parece mencionar que es una mala práctica. Puedes profundizar sobre eso? "Lamentablemente, los porcentajes no son compatibles con ninguna propiedad de sombra de cuadro, por lo que no responden tan fácilmente como un elemento HTML nativo. Sin embargo, aún se pueden cambiar manualmente en una animación o usando transform:scale(n) en el elemento HTML real del que forman parte".
@Zach Saucier: sería bueno si srcset fuera compatible con algo más que un kit web. He usado escala y no he encontrado borrosidad. ¿Tienes un ejemplo? ¿Está afirmando que esto sucede cuando cambia el tamaño del navegador o del escritorio al móvil? Si está en el cambio de tamaño del navegador, la mayoría de los usuarios (99,9 %) no cambian el tamaño del navegador de la forma en que lo hacemos durante las pruebas.
Después de pensar un poco más: usar scale()para imágenes está bien siempre que 1) el valor de la escala sea menor que 1 (más de 1 siempre está borroso), 2) la imagen está posicionada absolutamente (de modo que la diferencia en el cuadro delimitador y la apariencia visual no importa), 3) el rendimiento no importa mucho (sería mejor cargar una imagen más pequeña si solo se requiere una imagen más pequeña), y 4) si se combina con otras transformaciones, debe ser muy probado porque los navegadores tienen problemas con ciertos tipos de transformaciones, especialmente cuando se combinan
¿Cómo crear una animación de hoja de sprites receptiva en css?
RespuestasAquíPolítica de privacidad1y, 0v