Nueve ejemplos sencillos de animación CSS3. Usando animación CSS
Hola queridos lectores. En este día, hablemos de algo bastante interesante llamado animación CSS. Es decir, esta animación de elementos se realiza únicamente utilizando estilos y aquí no se utilizan scripts.
Como puedes ver, hay un atributo aquí. :flotar, que cambia el estilo de fondo al pasar el mouse; en algunos ejemplos debería ser obligatorio.
Cambie suavemente el color de un elemento al pasar el mouse usando la transición
#caja1 (
margen inferior: 5px;
color de fondo: #ccc;relleno: 10px;
alineación de texto: centro;
ancho: 200px;
altura: 100 px;sangría de texto: 0px;
borde: 1px sólido #888;
-moz-transition: color de fondo 0,8 s 0,1 s facilidad;
-o-transición: color de fondo 0,8 s 0,1 s facilidad;
-webkit-transition: color de fondo 0,8 s 0,1 s facilidad;
cursor: puntero;)#caja1 :flotar {
color de fondo: #97CE68;
color: #333;
}
Como puedes ver, logramos esta animación usando el atributo transición. Aquí puede cambiar la velocidad de la animación en segundos, en este caso son 0,8 segundos antes de que el color cambie completamente al pasar el cursor y 0,1 segundos antes de que la animación funcione después de pasar el cursor y quitar el cursor. (Perdón por el rompecabezas :-)) Este valor se puede cambiar según sea necesario.
El color de fondo al pasar el mouse se establece como un atributo :flotar, es obligatorio aquí; de lo contrario, la animación no funcionará.
Cambiar el tamaño de un elemento
#caja2 (
margen inferior: 5px;
color de fondo: #ccc;
color: #333;relleno: 10px;
alineación de texto: centro;
ancho: 200px;
altura: 100 px;sangría de texto: 0px;
borde: 1px sólido #888;
-moz-transition: todos los 1 lineales;
-o-transición: todos los 1 lineales;
-webkit-transition: todos los 1 lineales;
cursor: puntero;)#caja2 :flotar {
color de fondo: #97CE68;
color: #000;
ancho: 150 px;
altura: 50 píxeles;
}
En este ejemplo, logramos un cambio suave en el tamaño del bloque al pasar el mouse. El valor estándar es 200 por 100 y el valor de desplazamiento es 150 por 50, que lo establece el atributo :flotar.
Aquí también puedes cambiar el bloque solo en ancho o alto, solo necesitas :flotar borrar ancho:— el bloque cambia sólo en altura, altura:— el bloque cambia sólo en ancho.
También puede cambiar la tasa de cambio. En este caso es 1s.
Torsión de objetos
#caja3 (
margen inferior: 5px;
color de fondo: #ccc;
color: #333;relleno: 10px;
alineación de texto: centro;
ancho: 200px;
altura: 100 px;sangría de texto: 0px;
borde: 1px sólido #888;
-moz-transition: todos los 1s 0,1s entran fácilmente;
-o-transición: todos los 1s 0,1s entran fácilmente;
-webkit-transition: entrada fácil de todos los 1s 0,1s;
cursor: puntero;)#cuadro3: pasar el cursor (
color de fondo: #97CE68;
color: #000;
-webkit-transform: rotar (360 grados);
-moz-transform: rotar (360 grados);
-o-transformar: rotar (360 grados);
}
La torsión ocurre usando transformar Y transición. En este caso, el objeto gira 360 grados en el sentido de las agujas del reloj a una velocidad de un segundo. Si desea que el bloque gire en sentido antihorario, transformar El valor debe establecerse en - (menos). Naturalmente, el grado de rotación se puede cambiar.
Acercar y alejar suavemente un objeto
#caja4 (
margen inferior: 5px;
color de fondo: #ccc;
color: #333;
relleno: 10px;
alineación de texto: centro;
ancho: 200px;
altura: 100 px;sangría de texto: 0px;
borde: 1px sólido #888;
-moz-transition: los 3 salen lentamente;
-o-transición: los 3 salen lentamente;
-webkit-transition: los 3 salen gradualmente;
cursor: puntero;)#cuadro4: pasar el cursor (
color de fondo: #97CE68;
color: #000;
-webkit-transformación: escala(2);
-transformación moz: escala(2);
-o-transformar: escala(2);
}
En este ejemplo, el bloque aumenta suavemente su tamaño 2 veces. Este valor se establece transformar: escala(2). Si establece el valor en 1,5, el bloque se ampliará 1,5 veces.
De la misma manera puedes reducir tamaño bloque, por ejemplo, establezca el valor en 0,5.
Cambio de bloque suave hacia abajo
#caja5 (
margen inferior: 5px;
color de fondo: #ccc;
color: #333;
relleno: 10px;
alineación de texto: centro;
ancho: 200px;
altura: 100 px;sangría de texto: 0px;
borde: 1px sólido #888;
-moz-transition: todos los 1 entran y salen fácilmente;
-o-transición: todos los 1 entran y salen fácilmente;
-webkit-transition: todos los 1 entran y salen fácilmente;
cursor: puntero;)#cuadro5: pasar el cursor (
color de fondo: #97CE68;
color: #000;
-webkit-transform: traducir (0.50px);
-moz-transform: traducir (0.50px);
-o-transformar: traducir (0.50px);
}
Aquí el movimiento se especifica en píxeles. En este caso (0,50 px). También puedes hacer que el bloque se eleve con este valor de 0,-50 px. O en diagonal hacia abajo 50 px, 50 px. En una palabra, se puede hacer que el bloque se mueva a cualquier parte.
Eso es básicamente todo lo que quería decir. No, no todo :-) Olvidé recordarte que esta animación CSS se puede aplicar a cualquier objeto del sitio: imágenes, texto, encabezados, iconos, etc. Para los enlaces, un cambio de color suave es perfecto; en mi opinión, es muy bonito. :-)
Además, esta información la compartió con nosotros el sitio shpargalkablog.ru. Por lo cual le agradezco mucho.
Eso es todo seguro ahora :-) Hasta pronto, amigos.
¡ATENCIÓN! Dado que en esta lección analizaremos la animación, no podré mostrarles un ejemplo de su trabajo en imágenes, así que no dude en abrir el editor de código y escribir allí el código que se proporciona en este artículo.
Conceptos básicos de creación
Entonces, antes que nada, debes comenzar con cómo crearlo. Probablemente esté acostumbrado al hecho de que cualquier cosa en CSS se implementa asignando las propiedades necesarias con los valores apropiados al selector deseado. Entonces, al crear animación, esto no es suficiente. El diagrama se ve así:
Los efectos de transición en sí se crean usando @keyframes
Al elemento requerido se le da esta misma animación, así como sus parámetros (todo esto usando propiedades y sus valores).
Entonces, primero debemos describir los cambios necesarios en @keyframes, echemos un vistazo más de cerca a cómo trabajar con ellos.
@keyframes sintaxis
En realidad, me resultará más fácil explicarte todo utilizando un ejemplo ya preparado, aunque sea muy sencillo. Aquí está (el código se agrega al archivo css):
@keyframes pulse( 0%(tamaño de fuente: 50px;) 50%(tamaño de fuente: 60px;)) 100%(tamaño de fuente: 50px;))
@keyframes pulso ( 0% (tamaño de fuente: 50px;) 50% (tamaño de fuente: 60px;)) |
Entonces, después de la palabra clave @keyframes hay una palabra arbitraria que actuará como nombre de la animación. En nuestro caso es “pulso”. A continuación, abra las llaves en las que están escritas las reglas necesarias.
Los porcentajes son las llamadas marcas de tiempo en las que las propiedades especificadas se agregarán al elemento. En nuestro caso, lo que está escrito significa lo siguiente: al comienzo de la ejecución, el tamaño de fuente será de 50 píxeles, en el medio aumentará a 60 y al final volverá a disminuir al tamaño inicial.
Las palabras clave from y to pueden reemplazar la entrada de porcentaje; indican 0% y 100%, respectivamente, es decir, el comienzo y el final de la reproducción.
Poniendo la animación en acción
Por ahora solo tenemos código que genera un efecto de animación, pero no se usa en ninguna parte. Si actualiza su página web, nada cambiará. En consecuencia, para aplicar la animación, es necesario realizar dos pasos:
Seleccione el elemento para el que se aplicará
Asócielo con las reglas descritas a través de @keyframes (a través del nombre) y también establezca configuraciones adicionales si es necesario.
vamos a intentarlo
En mi archivo html, creé un bloque con la clase sombra, que contiene una simple línea de texto. Nuestro objetivo es aplicar los efectos de animación que describimos anteriormente a este elemento de texto.
Hay dos propiedades requeridas que deben especificarse en este caso para que todo funcione. En primer lugar, este es el nombre que escribimos en los fotogramas clave. En segundo lugar, esta es la duración de la animación, porque sin este parámetro el navegador simplemente no podrá reproducirla.
Así, además de los estilos que ya tiene nuestro bloque, añadimos otros nuevos:
nombre de la animación: pulso; duración de la animación: 2 s;
Así, todo se repetirá 4 veces y luego se detendrá. Como comprenderá, en lugar de cuatro puede ingresar cualquier número.
Animación sin fin en css3.
Implementado muy fácilmente usando esta misma propiedad. De hecho, puedes establecer el número de repeticiones en un par de miles, esto será suficiente, pero teóricamente nuestra animación no se repetirá indefinidamente.
animación-iteración-recuento: infinito;
animación-iteración-recuento: infinito; |
Eso es todo, ahora hemos hecho una repetición interminable. No recomiendo comprobar si esto es cierto después de estar sentado detrás de un monitor toda la vida. Sólo se utiliza en los casos en los que se desea que el efecto se repita constantemente y no desaparezca. Si es discreto y no distrae al usuario, ¿por qué no?
Retraso antes del inicio
De forma predeterminada, la reproducción comienza después de que la página se haya cargado por completo. Este comportamiento se puede controlar utilizando la propiedad de retardo de animación. Su valor se especifica en segundos.
Dirección
Otra propiedad interesante es la dirección de la animación. De forma predeterminada, está configurado en normal; si lo configura en inversión, todos los fotogramas descritos se ejecutarán en la dirección opuesta. Veamos cuál es la diferencia. Para hacer esto, cambié un poco el efecto agregando otro marco.
@keyframes pulse( 0%(tamaño de fuente: 50px;) 50%(tamaño de fuente: 60px;) 70%(tamaño de fuente: 80px;) 100%(tamaño de fuente: 50px;))
@keyframes pulso ( 0% (tamaño de fuente: 50px;) 50% (tamaño de fuente: 60px;) 70% (tamaño de fuente: 80px;) 100% (tamaño de fuente: 50px;)) |
Entonces, con una dirección normal, en la primera mitad de la animación el tamaño de la fuente aumentará a 60 píxeles, luego aumentará bruscamente nuevamente a 80, después de lo cual volverá a su posición original.
Arroz. 2. Tamaño del texto original
Arroz. 3. El tamaño de fuente está casi al final de la animación, antes de volver abruptamente a su estado original.
Ahora preguntamos:
dirección de animación: inversa;
animación-dirección: inversa; |
Todo se puso patas arriba. Primero, el texto aumentará hasta 30 píxeles, hasta 80, y durante el resto de la animación irá disminuyendo gradualmente, hasta volver finalmente a su tamaño anterior. Es sencillo.
Forma de animación
Y esta es quizás una de las configuraciones más interesantes con la que puedes experimentar durante mucho tiempo. De forma predeterminada, todos los cambios se realizan a la misma velocidad. Este tipo de animación se llama lineal y existen otras además.
La animación CSS3 se utiliza bastante. Es hora de que incluso los creadores de sitios web más novatos comprendan qué es la animación CSS y cómo crearla. Podrías pensar que la animación CSS3 se trata de hacer que los bloques se muevan y parece una caricatura. Pero la animación CSS no se trata sólo de mover un elemento de un punto a otro, sino también de distorsión y otras transformaciones. Para que esto quede claro incluso para los principiantes, escribí todo paso a paso.
1. Propiedades básicas de la animación CSS3.
Un pequeño bloque teórico a partir del cual entenderás qué propiedades de CSS3 son las responsables de la animación, así como qué valores pueden tomar.
- nombre-animación— un nombre único para la animación (fotogramas clave, hablaremos de ellos a continuación).
- duración de la animación— duración de la animación en segundos.
- función de sincronización de animación— curva de cambio de velocidad de animación. A primera vista no está muy claro. Siempre es más fácil demostrarlo con un ejemplo, y los verás a continuación. Puede tomar los siguientes valores: lineal | facilidad | facilidad de entrada | facilidad de salida | Bézier cúbico (n, n, n, n) .
- retardo de animación— retraso en segundos antes de que comience la animación.
- animación-iteración-recuento— número de repeticiones de animación. Se puede especificar simplemente como un número o se puede especificar infinito y la animación se ejecutará sin cesar.
Estas son solo las propiedades básicas, que son más que suficientes para crear su primera animación CSS3.
Lo último que necesitamos saber y comprender desde la teoría es cómo crear fotogramas clave. Esto también es fácil de hacer y se hace usando la regla @keyframes, dentro de la cual se especifican los fotogramas clave. La sintaxis de esta regla es:
Arriba configuramos el primer y último fotograma. ¡Todos los estados intermedios se calcularán AUTOMÁTICAMENTE!
2. Ejemplo real de animación CSS3
La teoría, como siempre, es aburrida y no siempre clara. Es mucho más fácil ver todo usando un ejemplo real, pero es mejor hacerlo usted mismo en alguna página HTML de prueba.
Cuando aprendes un lenguaje de programación, normalmente escribes un programa de "¡Hola, mundo!", a partir del cual puedes comprender la sintaxis de este lenguaje y algunas otras cosas básicas. Pero no estamos estudiando un lenguaje de programación, sino un lenguaje para describir la apariencia de un documento. Por tanto, tendremos nuestro propio “¡Hola, mundo!”
Esto es lo que haremos, por ejemplo: tengamos algún tipo de bloque Parece que todo está claro: solo necesitas comprimir el bloque. Primero el marcado HTML. Es muy simple porque solo trabajamos con un elemento por página. Y esto es lo que hay en el archivo de estilo: Como puede ver, especificamos solo el primer y último fotograma clave, y todos los intermedios se "construyeron" automáticamente. Tu primera animación CSS3 está lista. Para consolidar los conocimientos adquiridos, cree un documento HTML y un archivo CSS, e inserte allí (o mejor aún, escríbalo a mano) el código del ejemplo. Entonces definitivamente entenderás todo. Luego intente lo mismo con la altura del bloque (debe disminuir en altura) para asegurar el material. Arriba aprendiste cómo crear fácilmente animaciones CSS3. Si intentaste hacer esto con tus propias manos, ya entendiste todo el proceso y ahora quieres descubrir cómo puedes crear una animación más compleja y hermosa. Y realmente es posible crearlo. A continuación hay 3 lecciones en las que se crea la animación de la misma manera que en el ejemplo anterior. 3 lecciones sobre animación CSS (transformaciones) Las lecciones te ayudarán a comprender aún mejor la animación CSS. Lo principal es intentar repetir lo que ves en las lecciones. O al menos intente cambiar los valores de las propiedades y vea qué sucede, entonces le tendrá menos miedo a CSS. El resultado de esta lección funciona en los navegadores Safari, Chrome, Opera, Firefox, a partir de la versión 4 (donde verás transformaciones, pero sin animación). Además, utilizando el prefijo del navegador -ms-, puede ver resultados positivos en IE, a partir de la versión 9. Para implementar la animación CSS, debe establecer configuraciones de transformación especiales que responderán a los eventos del mouse. También es necesario especificar una función especial que será responsable del tiempo de ejecución de la animación. Para que las transformaciones funcionen en Firefox y Opera, simplemente reemplace el prefijo -webkit con -moz y -o. Para IE - a -ms. Las transformaciones CSS se utilizan para cambiar la apariencia, la rotación y otras transformaciones de un elemento. Todas estas configuraciones están configuradas en hojas de estilo normales y, cuando abres la página, ya ves el resultado final de la transformación. Para ver la transformación en sí de una vista a otra (animación de transformación), puede adjuntar algún evento al elemento (por ejemplo, el evento de pasar el mouse); En el siguiente ejemplo, colocamos 4 divs absolutamente idénticos con un borde de 2px. Para transformar estos elementos en navegadores que se ejecutan en webkit, agregue el prefijo -webkit-transform: Sin estas transformaciones, los divs se verán exactamente iguales. Para animar transformaciones en navegadores Webkit, puede utilizar el prefijo -webkit-transition. La demostración se muestra a continuación: Hay 4 divs idénticos frente a ti. Para iniciar la animación, debe mover el mouse hacia adentro o hacia afuera. Con todo esto, nada de JavaScript. Sólo HTML y CSS. La animación CSS se puede aplicar no sólo a las transformaciones, sino también a otras propiedades como la transparencia, el color y más. Esto se demuestra en el siguiente ejemplo. Un elemento se convierte en otro y viceversa: Nuevamente, solo usamos HTML y CSS. En este caso, cambie la configuración color del borde, radio del borde. Para aplicar múltiples transformaciones al mismo elemento, simplemente enumere las configuraciones separadas por un espacio. Por ejemplo: Estas configuraciones, al pasar el mouse sobre 1 segundo, cambiarán el color del submenú, lo rotarán y aumentarán su tamaño. Aquí hay otro ejemplo interesante de cómo combinar varios tipos de transformaciones en una animación: Es posible que este ejemplo no funcione muy bien en Safari 3 y versiones anteriores de Opera. El cuadro rodeado por un marco de puntos que aparece mientras se reproduce la animación representa la posición del elemento div. Simplemente lo cambiamos y rotamos su contenido. ¡Es sencillo! Para crear animaciones más complejas, es necesario utilizar fotogramas clave especiales. En este ejemplo, agregaremos varias transformaciones de elementos, cada una de las cuales se reproducirá dentro de un período de tiempo específico. Cuando ocurre un evento:hover, el cuadrado azul girará, cambiará de color a rojo y se moverá desde la esquina superior izquierda a la inferior derecha. Lo primero que probablemente deberías haber notado es la peculiaridad del movimiento del cuadrado. Ahora no es agudo, sino más “curvo”. Todo gracias a las funciones de entrada y salida fáciles. Tenga en cuenta también que el cambio de color se produce antes de la rotación. El truco es que puedes dividir -webkit-transition en varias entradas: #block (... fondo: azul; ... -webkit-transition-property: izquierda, arriba, fondo, -webkit-transform; -webkit-transition-duration: 2s, 2s, 1s, 1s; -webkit-transition -función de temporización: salida fácil, entrada fácil, lineal, entrada-salida fácil; -webkit-transition-delay: 0, 0, 0, 1s...) #stage:hover #block (izquierda: 100px; arriba: 100px; fondo: rojo; -webkit-transform: rotar (360 grados); Probablemente muchas personas estarán interesadas en una funcionalidad similar: al hacer clic en un elemento se transforma otro. En CSS, esto se puede lograr usando los selectores >, + y ~. He aquí un ejemplo relevante: En este ejemplo, utilizamos el signo + para interactuar con #box1 y #box2. ~ se puede utilizar para acceder a elementos que se encuentran en algún lugar alejado del elemento que está esperando el evento. #box2 ( posición: absoluta; izquierda: 120px; ... fondo: azul; ... ) #box1:hover + #box2 ( -webkit-transform: rotar(360deg); -moz-transform: rotar(360deg); -o-transform: rotar(360deg); -ms-transform: rotar(360deg); transformar: rotar(360deg); Al mismo tiempo podemos animar el primer bloque: El único inconveniente de estos ejemplos es que no funcionan (o funcionan mal) en versiones anteriores de navegadores. ¡Gracias a Niall por el tutorial sugerido! Gran parte de lo que nos alegra en la animación proviene del movimiento de objetos por la pantalla. Los efectos CSS al pasar el cursor atraen la atención de los usuarios sobre el contenido, una determinada parte de la interfaz y mejoran la percepción general del recurso. Moverse puede ser un poco loco, así: Puede que el movimiento no sea tan obvio. Por ejemplo, el que aparece al pasar el ratón sobre uno de los cuadrados de la siguiente figura: Su navegador no admite marcos en línea o actualmente está configurado para no mostrar marcos en línea. En los ejemplos dados, el movimiento se implementa mediante CSS. Tanto la animación como las transiciones CSS hacen que sea extremadamente fácil pasar de estático a en movimiento. Pero a pesar de esta simplicidad, hay ciertos matices que deben tenerse en cuenta para que el efecto de desplazamiento CSS funcione sin problemas al pasar el mouse. En este artículo te contaré exactamente sobre ellos. Cuando mueves un elemento, sus posiciones vertical y horizontal cambian. Hay varias propiedades CSS que se utilizan para esto. Pero quiero recomendarte que utilices la función Translate3d de la propiedad transform en lugar del habitual margin, padding, left, top porque proporciona una animación más fluida. La función traducir3d toma tres argumentos, pero primero veamos los responsables de mover el contenido horizontal y verticalmente: El argumento X especifica movimiento horizontal, Y – movimiento vertical. Por ejemplo, si desea mover el contenido 20 píxeles hacia la derecha y hacia arriba, la función Translate3d debería verse así: Foo ( transformar: traducir3d (20px, 20px, 0px); ) No consideraremos el tercer argumento, que determina el movimiento a lo largo del eje Z. Ya que estamos interesados en los efectos CSS de desplazamiento 2D. Como puede ver, la función Translate3d no es particularmente complicada. A continuación veremos cómo usarlo en animación CSS para crear movimiento. Para utilizar esta propiedad en una transición, debe completar dos pasos. Primero necesitas especificar transform como la propiedad que debe rastrear la transición: PictureContainer img (posición: relativa; arriba: 0px; transición: transformar .2s facilidad de entrada y salida;) Una vez que haya definido una transición, puede configurar la propiedad de transformación con la función Translate3d: PictureContainer img:hover ( transformar: traducir3d(0px, -150px, 0px); ) Como se muestra en el ejemplo al principio del artículo, el efecto de desplazamiento CSS al pasar el cursor del mouse sobre cualquiera de los elementos hace que la imagen se desplace hacia arriba 150 píxeles. En el caso de la animación, asegúrese de que los fotogramas clave en @keyframes contengan una propiedad de transformación con Translate3d: @keyframes bobble ( 0% ( transformar: traducir3d (50px, 40px, 0px); función de sincronización de animación: fácil entrada; ) 50% ( transformar: traducir3d (50px, 50px, 0px); función de sincronización de animación: facilidad -out; ) 100% ( transformar: traducir3d (50px, 40px, 0px); ) ) El ejemplo del artículo contiene todo lo que necesita para ver cómo funciona el efecto de desplazamiento CSS para el diseño de tablas. Para que el marcado funcione en diferentes navegadores, asegúrese de utilizar prefijos de proveedores o la biblioteca sin prefijos para la propiedad de transformación. También puedes crear animaciones en movimiento en JavaScript. Aquí se aplican las mismas reglas. Primero necesitas establecer la posición usando transform Translate3d, pero en JavaScript esto es un poco más complicado. El fragmento de código necesario para esto se ve así: función getSupportedPropertyName(propiedades) (para (var i = 0; i< properties.length; i++) {
if (typeof document.body.style] != "undefined") {
return properties[i];
}
}
return null;
}
var transform = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"];
var item = document.querySelector("#theItem");
var transformProperty = getSupportedPropertyName(transform);
if (transformProperty) {
item.style = translate3d(someValueX, someValueY, 0px);
} Este código parece complicado porque usamos prefijos y verificamos que coincida con la versión de la función de transformación que se está utilizando. ¿Por qué no nos funciona establecer la posición usando margin, top, left, etc.? A menos que tenga una razón específica para hacerlo, no utilice las propiedades CSS de margen, relleno, superior, izquierda, inferior o derecha para crear efectos de desplazamiento. Aunque esto pueda parecer contradictorio. Déjame aclarar... Cuando cambia el conjunto de valores para las seis propiedades CSS que acabo de enumerar, el navegador realiza cálculos adicionales sobre cómo aparecerá en el diseño de toda la página. No estoy en contra del uso de estas propiedades para trabajos de diseño. Pero usarlos en animaciones o transiciones y cambiar valores sesenta veces por segundo es demasiado. Puedes establecer la posición del elemento que estás moviendo como fija o absoluta. Esto evitará que el navegador tenga que calcular el diseño de todo el documento. Pero en este caso, el navegador todavía realiza cálculos sobre el elemento que se mueve. Y el resultado de usar Translate3d no será necesariamente idéntico al resultado obtenido usando margen, relleno, etc. Además, como verás en el siguiente apartado, no serán 100% idénticos. Cuando se trata de mostrar elementos en la pantalla, los cálculos asociados se pueden realizar utilizando un procesador o una tarjeta de video. Pero para crear efectos de desplazamiento CSS para el diseño de la tabla, es mejor usar una tarjeta de video: La GPU solo está diseñada para manejar tareas relacionadas con la visualización. Al mismo tiempo, el procesador procesa en paralelo una gran cantidad de tareas diferentes. Y para que tu animación se muestre sin problemas, no puedes descuidar este patrón. La diferencia en la suavidad de la visualización de la animación puede no ser muy notable en una computadora de escritorio o portátil potente, pero se manifestará claramente en dispositivos móviles. Por experiencia personal, puedo decir que en estos dispositivos, las animaciones que usan la CPU se reproducen más entrecortadas que las que usan la GPU. ¿Cómo garantizar que la animación en modo acelerado por hardware utilice la GPU? Aplicar traducir3d! Cuando transformas un elemento usando Translate3d, se procesa a través de la GPU en navegadores Webkit como Chrome y Safari ( que están instalados en iPhone y iPad), en Internet Explorer 9/10, y también en las últimas versiones de Firefox. Esto le da claras ventajas a Translate3d. En cuanto a los efectos de desplazamiento CSS creados en JavaScript, donde toda la interpolación se maneja mediante código, en realidad no sé si usar la GPU es tan productivo. Pero utiliza la GPU para configurar transiciones de JavaScript y animaciones CSS con la propiedad Translate3d. Cuando utiliza JavaScript para establecer propiedades de animación o transición, el navegador aún genera la interpolación entre los puntos inicial y final de la animación. Los círculos azules en movimiento que habrás visto al principio de este artículo son prueba de ello. ¡Dios bendiga la transformación! La razón por la que la transformación tiene más rendimiento es porque no afecta a ningún otro elemento. Cualquier acción que realice se aplica a un solo elemento y el navegador no tiene que reconstruir toda la ventana. Sólo modifica la parte de la pantalla que contiene el contenido en movimiento. Esto no depende de si la GPU está involucrada o no. 1
<clase div = "toSmallWidth" >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.toSmallWidth (margen: 20px automático; /*márgenes externos en la parte superior e inferior de 20px y alineación en el medio*/ fondo: rojo; /*fondo rojo del bloque*/ altura: 100 píxeles; /*altura del bloque 100px*/ ancho: 800px; /*ancho inicial 800px*/-webkit-animation-name: animWidthSitehere; -webkit-animación-duración: 5s;/* propiedad con prefijo para los navegadores Chrome, Safari, Opera */ nombre-animación: animWidthSitehere;/* indica el nombre de los fotogramas clave (ubicados a continuación)*/ duración de la animación: 5 s;
}
/* fotogramas clave con prefijo para los navegadores Chrome, Safari y Opera */
@-webkit-keyframes animWidthSitehere ( desde (ancho: 800 px;) hasta (ancho: 100 px;)) @keyframes animWidthSiteaquí ( desde (ancho: 800px;) /*primer fotograma clave donde el ancho del bloque es 800px*/ a (ancho: 100px;) /*último fotograma clave, donde el ancho del bloque es 100px*/
}
3. Ejemplos de animación CSS3 más complejos
1. Introducción a las transformaciones CSS
2. Animación
4. Múltiples transformaciones en un elemento.
4. Animación en acción
5. Usar diferentes tipos de animación
6. El acontecimiento de un elemento transforma otro
Transformación con Translate3d()
Transición
Animación
No te olvides de los prefijos
Transiciones con JavaScript
Cálculos innecesarios
Aceleración de hardware
¿Qué pasa con JavaScript?
