1. No todas las propiedades CSS se pueden animar
Las personas que se ocupan de CSS a menudo saben que no todas las propiedades de CSS pueden usar animationpropiedades para lograr efectos de animación. El ejemplo más típico es el background-imagedegradado.
Un degradado lineal típico se compone de ángulo, color y posición, por ejemplo:
.gradient {
imagen de fondo: degradado lineal (45 grados, rojo 50%, azul 50%);
}
Ya sea ángulo ( 45deg), color ( red, blue) o posición ( 50%) solo como atributos, todas pueden ser transiciones animadas, pero cuando se combinan como un fondo degradado, no pueden producir efectos de transición, porque background-imagela semántica son imágenes.
¿Hay alguna forma de hacer que la imagen de fondo pueda lograr una transición de animación, al menos se puede lograr un degradado CSS?
Después de mi investigación y exploración, encontré una solución. Aunque no es 100% perfecto, es suficiente para ser utilizado en el proyecto. Puede hacer muchas propiedades que no eran compatibles con la animación CSS antes y también con efectos de animación nativos.
Dos contadores de semillas variables
Chrome y otros navegadores (excepto Safari) tienen una función, es decir, cuando usamos @keyframesfotogramas clave definidos, las propiedades establecidas en los fotogramas clave también se ejecutarán (cambiadas hace unos años, no antes). Los casos típicos son las contentpropiedades y los cambios de contenido.
Por ejemplo, para lograr un efecto de puntos "cargando ..." puede ser el siguiente CSS y HTML:
dot :: before {
content: '...';
posición: absoluta;
animación: punto 3s paso infinito-iniciar ambos;
}
punto: después de {
contenido: '...';
color: transparente;
}
@keyframes dot {
33% {content: '.'; }
66% {contenido: '..'; }
}
<button> Cargando<dot></dot> </button>
Los efectos en tiempo real son los siguientes:
Cargando
Según mi prueba, no solo las propiedades CSS ordinarias se pueden ejecutar en fotogramas clave de animación CSS, sino que las propiedades personalizadas de CSS (variables CSS) también se pueden ejecutar en fotogramas clave de animación CSS. P.ej:
@keyframes var {
33% {--someVar: 33%; }
66% {--someVar: 66%; }
}
Esta característica es muy esclarecedora. Si uno de nuestros valores de propiedad CSS se construye en base a esta --someVarvariable, ¿no sería cierto que incluso si el valor de la propiedad no es compatible con la animación CSS, solo necesito hacer la brecha entre cada porcentaje? valor suficientemente pequeño. ¿Conseguir un efecto de animación suave?
El método específico es dividir los fotogramas clave de la animación CSS 0%-100%en 101 partes, y luego contar cada uno desde 0 por turno, como un contador, y luego asignar este contador a una variable CSS específica. Finalmente, podemos obtener una animación CSS "contador de semillas variable" como se muestra a continuación.
@keyframes seed {
0% {- semilla: 0} 1% {- semilla: 1} 2% {- semilla: 2} 3% {- semilla: 3} 4% {- semilla: 4} 5% {- semilla: 5} 6% {- semilla: 6} 7% {- semilla: 7} 8% {- semilla: 8} 9% {- semilla: 9} 10% {- semilla: 10} 11 % {- semilla: 11} 12% {- semilla: 12} 13% {- semilla: 13} 14% {- semilla: 14} 15% {- semilla: 15} 16% {- semilla : 16} 17% {- semilla: 17} 18% {- semilla: 18} 19% {- semilla: 19} 20% {- semilla: 20} 21% {- semilla: 21} 22% {--seed: 22} 23% {- seed: 23} 24% {- seed: 24} 25% {- seed: 25} 26% {- seed: 26} 27% {- seed: 27} 28% {- semilla: 28} 29% {- semilla: 29} 30% {- semilla: 30} 31% {- semilla: 31} 32% {- semilla: 32} 33% { --seed: 33} 34% {- seed: 34} 35% {- seed: 35} 36% {- seed: 36} 37% {- seed: 37} 38% {- seed: 38 } 39% {- semilla: 39} 40% {- semilla: 40} 41% {- semilla: 41} 42% {- semilla: 42} 43% {- semilla: 43} 44% {- -seed: 44} 45% {- seed: 45} 46% {- seed: 46} 47% {- seed: 47} 48% {- seed: 48} 49% {- seed: 49} 50% {- semilla: 50} 51% {- semilla: 51} 52% {- semilla: 52} 53% {- semilla: 53} 54% {- semilla: 54} 55% {- semilla: 55} 56% {- semilla: 56} 57% {- semilla: 57} 58% {- semilla: 58} 59% {- semilla: 59} 60% {- semilla: 60} 61 %{--semilla:61} 62% {- semilla: 62} 63% {- semilla: 63} 64% {- semilla: 64} 65% {- semilla: 65} 66% {- semilla: 66} 67% { --seed: 67} 68% {- seed: 68} 69% {- seed: 69} 70% {- seed: 70} 71% {- seed: 71} 72% {- seed: 72 } 73% {- semilla: 73} 74% {- semilla: 74} 75% {- semilla: 75} 76% {- semilla: 76} 77% {- semilla: 77} 78% {- -seed: 78} 79% {- seed: 79} 80% {- seed: 80} 81% {- seed: 81} 82% {- seed: 82} 83% {- seed: 83} 84% {- semilla: 84} 85% {- semilla: 85} 86% {- semilla: 86} 87% {- semilla: 87} 88% {- semilla: 88} 89% {- semilla: 89} 90% {- semilla: 90} 91% {- semilla: 91} 92% {- semilla: 92} 93% {- semilla: 93} 94% {- semilla: 94} 95 % {- semilla: 95} 96% {- semilla: 96} 97% {- semilla: 97} 98% {- semilla: 98} 99% {- semilla: 99} 100% {- semilla : 100}83} 84% {- semilla: 84} 85% {- semilla: 85} 86% {- semilla: 86} 87% {- semilla: 87} 88% {- semilla: 88} 89% { --seed: 89} 90% {- seed: 90} 91% {- seed: 91} 92% {- seed: 92} 93% {- seed: 93} 94% {- seed: 94 } 95% {- semilla: 95} 96% {- semilla: 96} 97% {- semilla: 97} 98% {- semilla: 98} 99% {- semilla: 99} 100% {- -semilla: 100}83} 84% {- semilla: 84} 85% {- semilla: 85} 86% {- semilla: 86} 87% {- semilla: 87} 88% {- semilla: 88} 89% { --seed: 89} 90% {- seed: 90} 91% {- seed: 91} 92% {- seed: 92} 93% {- seed: 93} 94% {- seed: 94 } 95% {- semilla: 95} 96% {- semilla: 96} 97% {- semilla: 97} 98% {- semilla: 98} 99% {- semilla: 99} 100% {- -semilla: 100}
}
El @keyframes seed{}código CSS relevante anterior es una "semilla de animación" que se puede usar de forma indefinida. Ya sean las propiedades que originalmente admiten la animación CSS o las que no admiten la animación CSS, siempre que el valor de la propiedad esté relacionado con el valor, puede utilizar esta "Semilla de animación" realiza efectos de animación.
Da un ejemplo de rotación gradual
Por ejemplo, al comienzo del ejemplo de gradiente lineal, podemos asociar el ángulo de rotación del gradiente con las --seedvariables en nuestra "semilla de animación" y cooperar con los animationatributos para lograr el efecto de rotación del gradiente:
.gradient {
ancho: 150px; altura: 150px;
imagen de fondo: gradiente lineal (calc (3.6deg * var (- semilla)), rojo 50%, azul 50%);
animación: semilla 1s lineal infinito;
}
<div class = "gradiente"> </div>
El efecto en tiempo real es el siguiente (haga clic aquí si no se mueve):
El fondo degradado que originalmente no era compatible con la animación CSS también tiene un efecto de transición de animación.
Tres, más efectos de animación
Con el "contador de semillas variable", podemos lograr mejor efectos de animación de gráficos de fondo densos que eran difíciles de lograr en el pasado, como el siguiente efecto de zoom de círculo en mosaico:
Los códigos CSS y HTML son los siguientes:
.radial-gradient {
relleno: 50%;
background-image: radial-gradient (# cd0000 calc (2% * var (- semilla)), calc transparente (2% * var (- semilla)));
tamaño de fondo: 80px 80px;
animación: semilla 1s lineal infinito;
}
<div class = "radial-gradient"> </div>
Simplemente use la var(--seed)variable semilla para representar los bordes de nuestro degradado radial . Usar el 2%cálculo en lugar de usar 1%es tener un cierto retraso después de que el rojo esté lleno; de lo contrario, los ojos parpadearán ciegos cuando se experimente el efecto.
Ver para creer, si es un navegador Chrome o un dispositivo Android, puede hacer clic aquí: Variables CSS y demostración de animación de degradado radial
Puede modificar algunos valores en la página de demostración proporcionada anteriormente para experimentar diferentes efectos.
Cuarto, compatibilidad y conclusión.
El "contador de semillas variable" se da cuenta de la compatibilidad de la tecnología de animación de la siguiente manera:
- Totalmente accesible en el navegador Chrome y dispositivos Android;
- El navegador Firefox también admite la configuración de variables CSS en los cuadros de animación, pero las propiedades que deben animarse también están escritas en ellos, es decir, deben escribirse en cada cuadro
background-image, pero esto es completamente no reutilizable y costoso, por lo que valor limitado - Los navegadores Internet Explorer y Safari no lo admiten en absoluto;
Debido a que Safari no lo admite, no hay ningún efecto en los teléfonos iOS, lo que restringe enormemente el valor práctico.
Pero en ocasiones especiales, no es imposible utilizarlo. Podemos utilizar mejoras para lograr algunos efectos especiales, como la novedosa animación interactiva que se presenta en este artículo: " Las animaciones de transición CSS que utilizas se pueden cambiar ".
El camino de la investigación es largo, según mi experiencia previa en la investigación de tecnología, definitivamente encontraré una mejor manera de implementarla más adelante, espere y verá.
Eso es todo, gracias por leer, y espero que el contenido de este artículo pueda ser esclarecedor para usted.