¿Está permitido usar cualquier valor decimal en animaciones de CSS de fotogramas clave?

Me pregunto si es correcto utilizar los valores de porcentaje de esta manera:¿Está permitido usar cualquier valor decimal en animaciones de CSS de fotogramas clave?

@keyframes myAnimation { 
    0% { height: 100px; } 
    33.3% { height: 120px; } 
    66.6% { height: 140px; } 
    100% { height: 200px; } 
}

Parece que funciona, pero no estoy seguro de si los navegadores puede ser que apenas "redondo" esto? ¿Y qué pasa con valores como 33.3457%? ¡Muchas gracias!

Fuente

2012-05-07 Seka

Bueno, digamos que usted tiene una animación que funciona durante 1000 segundos. 33% de eso son 330 segundos, mientras que 33.3% son 333 segundos. Esa es una diferencia de 3 segundos, entonces sí, importa. – Seka

Agregué este comentario anterior porque el editor de esta pregunta preguntó "si es importante" y luego borró su comentario después de responder. No sé por qué lo hizo, pero no quiero dejar mi comentario aquí sin ningún contexto ... – Seka

Cuando se trata de CSS, toma nota de porcentajes de hasta 2 decimales y luego se detiene. Entonces usted podría obtener 33.34% pero no 33.3457% para usar en sus fotogramas clave

Espero que esto ayude.

Fuente

2012-05-07 18:27:32

¡Muchas gracias! ¡Eso es realmente útil! – Seka

No puedo encontrar ningún texto en [la especificación de animaciones CSS] (http://www.w3.org/TR/css3-animations/) que dice que los porcentajes son válidos solo para dos decimales. Cuidado para señalarlo? –

Estoy bastante seguro de que puedes usar más de 2 espacios decimales. Por ejemplo, Twitter Bootstrap usa 8 puntos decimales en sus porcentajes, y aunque no estoy seguro, dudo que lo hagan a menos que haya una razón para ello. –

Sí, puede usar la parte fraccionaria para definir porcentajes de fotogramas clave más precisos. Pero tal precisión es not clearly specified.

Es compatible con todos los navegadores compatibles con animaciones CSS. Pero no use demasiados decimales, puede ocurrir un comportamiento extraño (especialmente por encima de 5 dígitos).

que el uso que de animaciones complejas con bucles:

@keyframes{ 
    0%, 30%, 40%, 50%, 60%{ 
     top: 0px; 
    } 
    29.99999%, 39.99999%, 49.99999%, 59.99999%{ 
     top: 100px; 
    } 
    100%{ 
     top: 200px; 
    } 
} 
/* 
- 0px to 100px (30%) 
- loop 3 times 0px to 100px (10% each, total 30%) 
- 0px to 200px (40%) 
*/

La precisión predeterminada SASS es de 3 dígitos y se puede cambiar con --precision (opción cmd) o Sass::Script::Number.precision

Fuente

2014-05-15 10:45:51 mems

¿Está permitido usar cualquier valor decimal en animaciones de CSS de fotogramas clave?

Respuesta

Cuestiones relacionadas