Animación en movimiento suave usando CSS. Cómo implementar una apariencia suave de un elemento en css3
Transiciones CSS3 le permite animar el valor original de una propiedad CSS a un nuevo valor a lo largo del tiempo, controlando la rapidez con que cambian los valores de la propiedad. La mayoría de las propiedades cambian sus valores en 16 milisegundos, por lo que el tiempo de transición estándar recomendado es de 200 ms.
Las propiedades cambian cuando ocurre un determinado evento, que se describe mediante la pseudoclase correspondiente. La pseudoclase más utilizada es: hover. Esta pseudoclase no funciona en dispositivos móviles como iPhone o Android. Una solución universal que funciona en navegadores de escritorio y móviles sería manejar eventos usando JavaScript (por ejemplo, cambiar de clase al hacer clic).
Las transiciones se aplican a todos los elementos, así como a los pseudoelementos:antes y:después. Para establecer todas las propiedades de transición, normalmente se utiliza una abreviatura para la propiedad de transición.
Es posible que las transiciones CSS3 no se apliquen a todas las propiedades y sus valores. Encontrará una lista detallada en la página.
Crear cambios suaves en las propiedades del elemento.
Soporte del navegador
ES DECIR: 10.0
Firefox: 16.0, 4.0 -moz-
Cromo: 26.0, 4.0 -kit web-
Safari: 6.1, 3.1 -kit web-
Ópera: 12.1, 11.6 -o-
iOSSafari: 7.1
Ópera Mini: —
Navegador de Android: 4.4, 4.1 -kit web-
Cromo para Android: 44
1. Nombre de propiedad propiedad de transición
Contiene el nombre de las propiedades CSS a las que se aplicará el efecto de transición. El valor de la propiedad puede contener una propiedad o una lista de propiedades separadas por comas. Al crear una transición, puede utilizar tanto el estado inicial como el final del elemento. La propiedad no se hereda.
Los efectos creados deben ser discretos. No es necesario que todas las propiedades cambien suavemente con el tiempo debido a la experiencia del usuario. Por ejemplo, cuando pasa el cursor sobre un enlace, queremos ver un cambio instantáneo en el color del enlace o en el color y estilo del subrayado. Por lo tanto, las transiciones deben usarse para aquellas propiedades sobre las que realmente desea llamar la atención.
Sintaxis
Div (ancho: 100px; propiedad de transición: ancho;) div:hover (ancho: 300px;)
2. Duración de la transición duración de la transición
Especifica el período de tiempo durante el cual debe ocurrir la transición. Si diferentes propiedades tienen diferentes valores de transición, se separan por comas. Si no se especifica la duración de la transición, la animación no se producirá al cambiar los valores de las propiedades. La propiedad no se hereda.
Sintaxis
Div (duración de la transición: .2s;)
3. función de sincronización de transición
La propiedad especifica una función de tiempo que describe la velocidad a la que un objeto pasa de un valor a otro. Si define más de una transición para un elemento, como el color de fondo del elemento y su posición, puede utilizar diferentes funciones para cada propiedad. La propiedad no se hereda.
| función de sincronización de transición | |
|---|---|
| Valores: | |
| facilidad | La función predeterminada es que la transición comienza lentamente, se acelera rápidamente y se ralentiza al final. Corresponde a cúbico-bezier(0.25,0.1,0.25,1) . |
| lineal | La transición se produce de manera uniforme durante todo el tiempo, sin fluctuaciones de velocidad. Corresponde a cúbico-bezier(0,0,1,1) . |
| facilidad de entrada | La transición comienza lentamente y luego se acelera suavemente al final. Corresponde a cúbico-bezier(0.42,0,1,1) . |
| facilitar la salida | La transición comienza rápidamente y se ralentiza suavemente al final. Corresponde a cúbico-bezier(0,0,0.58,1) . |
| facilidad de entrada y salida | La transición comienza lentamente y termina lentamente. Corresponde a cúbico-bezier(0.42,0,0.58,1) . |
| Bézier cúbico (x1, y1, x2, y2) | Le permite configurar manualmente valores de 0 a 1 para la curva de aceleración. puedes construir cualquier trayectoria de transición. |
| inicial | Establece el valor de la propiedad en el valor predeterminado. |
| heredar | Hereda el valor de la propiedad del elemento padre. |
Sintaxis
Div (función de sincronización de transición: lineal;)
Para crear animaciones más realistas, utilice la función Bézier cúbica:
Arroz. 1. Funciones Bézier cúbicas personalizadas de easings.net | Nombre personalizado | Valor de la función |
|---|---|
| facilidadInSine | Bézier cúbico (0,47, 0, 0,745, 0,715) |
| facilidadOutSine | Bézier cúbico (0,39, 0,575, 0,565, 1) |
| facilidadInOutSine | Bézier cúbico (0,445, 0,05, 0,55, 0,95) |
| facilidadInQuad | Bézier cúbico (0,55, 0,085, 0,68, 0,53) |
| facilidadOutQuad | Bézier cúbico (0,25, 0,46, 0,45, 0,94) |
| facilidadInOutQuad | Bézier cúbico (0,455, 0,03, 0,515, 0,955) |
| facilidadInCubic | Bézier cúbico (0,55, 0,055, 0,675, 0,19) |
| facilidadOutCubic | Bézier cúbico (0,215, 0,61, 0,355, 1) |
| facilidadInOutCubic | Bézier cúbico(0,645, 0,045, 0,355, 1) |
| facilidadInQuart | Bézier cúbico (0,895, 0,03, 0,685, 0,22) |
| facilidadOutQuart | Bézier cúbico (0,165, 0,84, 0,44, 1) |
| facilidadInOutQuart | Bézier cúbico (0,77, 0, 0,175, 1) |
| facilidadInQuint | Bézier cúbico (0,755, 0,05, 0,855, 0,06) |
| facilidadOutQuint | Bézier cúbico (0,23, 1, 0,32, 1) |
| facilidadInOutQuint | Bézier cúbico (0,86, 0, 0,07, 1) |
| facilidadInExpo | Bézier cúbico (0,95, 0,05, 0,795, 0,035) |
| facilidadOutExpo | Bézier cúbico (0,19, 1, 0,22, 1) |
| facilidadInOutExpo | Bézier cúbico(1, 0, 0, 1) |
| facilidadInCirc | Bézier cúbico (0,6, 0,04, 0,98, 0,335) |
| facilidadOutCirc | Bézier cúbico (0,075, 0,82, 0,165, 1) |
| facilidadInOutCirc | Bézier cúbico (0,785, 0,135, 0,15, 0,86) |
| facilidadInBack | Bézier cúbico (0,6, -0,28, 0,735, 0,045) |
| facilidadOutBack | Bézier cúbico (0,175, 0,885, 0,32, 1,275) |
| facilidadInOutBack | Bézier cúbico (0,68, -0,55, 0,265, 1,55) |
4. retraso de transición
Una propiedad opcional le permite realizar el cambio de propiedad no inmediatamente, sino con cierto retraso. No heredado.
Sintaxis
Div (retraso de transición: .5s;)
5. Breve registro de transición
Todas las propiedades responsables de cambiar la apariencia de un elemento se pueden combinar en una propiedad de transición
(transición: transición-propiedad transición-duración transición-tiempo-función transición-retraso;)
Si utiliza los valores predeterminados, entonces la entrada
Div (transición: 1s;)
será equivalente
Div (transición: todos los 1 facilitan los 0;)
6. Transición suave de varias propiedades.
Puede especificar varias transiciones secuenciales para un elemento enumerándolas separadas por comas. Cada transición se puede diseñar con su propia función de tiempo.
Div (transición: fondo 0,3 s facilidad, color 0,2 s lineal;)
Div (propiedad de transición: alto, ancho, color de fondo; duración de la transición: 3 s; función de sincronización de transición: entrada fácil, facilidad, lineal;)
7. Ejemplos de transiciones para diversas propiedades.
Pase el mouse sobre los bloques para ver las propiedades en acción.
El modelo de formato visual CSS describe el sistema de coordenadas dentro de cada elemento posicionado. El sistema de coordenadas es el punto de referencia para las propiedades de desplazamiento. Se puede considerar que la posición y las dimensiones en este espacio de coordenadas están dadas en píxeles, en relación con un punto de referencia, con valores positivos hacia la derecha y hacia abajo. Este espacio de coordenadas se puede cambiar usando la propiedad de transformación.
Transformaciones CSS3 Le permite mover, rotar y escalar elementos. Las transformaciones transforman un elemento sin afectar a otros elementos de la página web, es decir, otros elementos no se mueven con respecto a él.
Los elementos que se pueden transformar incluyen elementos con display: block; y mostrar: bloque en línea; , así como elementos cuyo valor de propiedad de visualización se evalúa como table-row , table-row-group , table-header-group , table-footer-group , table-cell o table-caption . Un elemento con cualquier valor de propiedad de transformación distinto de ninguno se considera transformado.
Hay dos tipos de transformaciones CSS3: 2D Y 3D. transformaciones 2D transformar elementos en un espacio bidimensional utilizando una matriz de transformación 2D. Esta matriz se utiliza para calcular nuevas coordenadas de objetos en función de los valores de las propiedades de transformación y origen de transformación. Las transformaciones solo afectan la representación visual. En términos de diseño de página, pueden provocar que el contenido del bloque se desborde. Por defecto, el punto de transformación está en el centro del elemento.
Transformaciones 2D de elementos.
Soporte del navegador
ES DECIR: 10,0, 9,0 -ms-
Borde: 12.0
Firefox: 16.0, 3.5 -moz-
Cromo: 36.0, 4.0 -kit web-
Safari: 9.0, 3.1 -kit web-
Ópera: 23.0, 15.0 -kit web-
iOSSafari: 9, 7.1 -kit web-
Navegador de Android: 53, 2.1 -kit web-
Cromo para Android:-webkit-
1. Transformación de funciones de transformación 2D
La propiedad especifica el tipo de transformación del elemento. La propiedad se describe usando funciones de transformación, que mueven el elemento en relación con su posición actual en la página o cambian su tamaño y forma originales. No heredado.
Valores válidos:
matriz() - cualquier número
traducir() , traducirX() , traducirY() — unidades de longitud (positivas y negativas), %
escala() , escalaX() , escalaY() - cualquier número
rotar() - ángulo (grados, grados, rad o giro)
skew() , skewX() , skewY() - ángulo (grados, grados, rad)
| Función | Descripción |
|---|---|
| ninguno | El valor predeterminado significa que no hay transformación. También deshace la transformación de un elemento de un grupo de elementos transformables. |
| matriz (a, c, b, d, x, y) | Compensa elementos y establece cómo se transforman, lo que le permite combinar múltiples funciones de transformación 2D en una. Se permiten como transformaciones la rotación, el escalado, la inclinación y el reposicionamiento. El valor de a cambia la escala horizontal. Un valor entre 0 y 1 disminuye el elemento y un valor mayor que 1 lo aumenta. El valor c deforma (desplaza) los lados del elemento a lo largo del eje Y, un valor positivo hacia arriba y un valor negativo hacia abajo. El valor b deforma (desplaza) los lados del elemento a lo largo del eje X, un valor positivo hacia la izquierda, un valor negativo hacia la derecha. El valor d cambia la escala vertical. Un valor menor que 1 disminuye el elemento, mayor que 1 lo aumenta. El valor x mueve el elemento a lo largo del eje X, positivo hacia la derecha y negativo hacia la izquierda. Un valor y mueve el elemento a lo largo del eje y, un valor positivo lo mueve hacia abajo y un valor negativo lo mueve hacia arriba. |
| traducir(x,y) | Desplaza un elemento a una nueva ubicación, moviéndolo con respecto a su posición normal hacia la derecha y hacia abajo usando las coordenadas X e Y, sin afectar los elementos adyacentes. Si necesita mover un elemento hacia la izquierda o hacia arriba, deberá utilizar valores negativos. |
| traducirX(n) | Desplaza un elemento en relación con su posición X normal. |
| traducirY(n) | Desplaza un elemento con respecto a su posición normal a lo largo del eje Y. |
| escala(x,y) | Escala elementos para hacerlos más grandes o más pequeños. Los valores entre 0 y 1 hacen que el elemento sea más pequeño. El primer valor escala el elemento en ancho, el segundo en alto. Los valores negativos muestran el elemento en forma de espejo. |
| escalaX(n) | La función escala el ancho del elemento, haciéndolo más ancho o más estrecho. Si el valor es mayor que uno, el elemento se vuelve más ancho; si el valor está entre uno y cero, el elemento se vuelve más estrecho. Los valores negativos muestran el elemento reflejado horizontalmente. |
| escalaY(n) | La función escala la altura del elemento, haciéndolo más alto o más bajo. Si el valor es mayor que uno, el elemento se vuelve más alto; si el valor está entre uno y cero, el elemento se vuelve más bajo. Los valores negativos muestran el elemento reflejado verticalmente. |
| girar (ángulo) | Gira los elementos un número específico de grados, los valores negativos de -1 grado a -360 grados giran el elemento en el sentido contrario a las agujas del reloj, los valores positivos giran el elemento en el sentido de las agujas del reloj. El valor de rotación (720 grados) gira el elemento dos revoluciones completas. |
| sesgar (ángulo x, ángulo y) | Se utiliza para deformar (distorsionar) los lados de un elemento en relación con los ejes de coordenadas. Si se especifica un valor, el navegador determinará automáticamente el segundo. |
| sesgarX(ángulo) | Deforma los lados del elemento con respecto al eje X. |
| sesgadoY(ángulo) | Deforma los lados del elemento con respecto al eje Y. |
| inicial | Establece el valor de la propiedad en el valor predeterminado. |
| heredar | Hereda el valor de la propiedad del elemento padre. |
Sintaxis
Div ( -webkit-transform: rotar (360 grados); -ms-transform: rotar (360 grados); transformar: rotar (360 grados); )
Pase el mouse sobre los bloques para ver las funciones de transformación en acción.
2. Punto de transformación origen-transformación
La propiedad le permite cambiar el centro de transformación, en relación con el cual cambia la posición/tamaño/forma del elemento. El valor predeterminado es centro o 50% 50%. Establecer solo para elementos transformados. No heredado.
Antes de la llegada de CSS3, la palabra "animación" hacía que los diseñadores de diseño sudaran frío. Y todo porque en aquellos días hacer animaciones hermosas y de alta calidad no era una tarea trivial. CSS no pudo hacer esto, por lo que todas las animaciones se realizaron en JavaScript. Fue necesario examinar un montón de foros, encontrar los mismos compañeros en la desgracia, dedicar mucho tiempo al desarrollo y, al final, escuchar al diseñador: "Está bien, esto servirá". Y cuando finalmente salió CSS3, los fuegos artificiales no pararon hasta la mañana y el champán fluyó como un río. Fue un gran día para todos los desarrolladores web (el siguiente día fue cuando Microsoft anunció el fin del soporte para Internet Explorer). Con la llegada de CSS3, muchas tareas que antes eran complejas se han vuelto simples y divertidas de realizar. Lo mismo se aplica a las animaciones en CSS, de las que hablaré en este artículo.
Transiciones CSS
Las transiciones CSS le permiten realizar cambios en las propiedades CSS sin problemas y con el tiempo. De esta manera, tienes la oportunidad de controlar el proceso de transición de un elemento de un estado a otro. Comencemos con el ejemplo más simple y sigamos adelante.
Cuando pasas el cursor sobre el cuadrado, el color de fondo cambia suavemente.
Ahora echemos un vistazo más de cerca a cómo gestionar las transiciones en CSS. Tenemos sólo 5 propiedades que nos permiten controlar la animación de transición:
- propiedad de transición;
- duración de la transición;
- función de sincronización de transición;
- retraso de transición;
- transición;
propiedad de transición- especifica una lista de propiedades que serán animadas; Las propiedades no especificadas aquí se modificarán como de costumbre. Puede animar todas las propiedades de un elemento específico especificando el valor all. Si no especifica ninguna propiedad, el valor predeterminado es todo.
Propiedad de transición: ancho;
duración de la transición- establece la duración de la animación; el tiempo se puede especificar en segundos o milisegundos.
Duración de la transición: 1 s;
función de sincronización de transición- función de tiempo, especifica puntos de aceleración y desaceleración durante un cierto período de tiempo para controlar los cambios en la velocidad de la animación. En pocas palabras, puede utilizar esta propiedad para especificar el comportamiento de una animación. Por ejemplo, podemos acelerar la animación al principio y ralentizarla al final, o viceversa. Las curvas de Bézier se utilizan para definir el proceso de animación. En general, la función de sincronización de transición le permite crear muchos comportamientos diferentes para las animaciones; este es un tema completo para un artículo, por lo que no profundizaremos aquí.
Función de sincronización de transición: cúbica-bezier (0, 0, 1, 1);
retraso de transición- establece el tiempo de retraso antes del inicio de la animación, se puede especificar en segundos o milisegundos.
Retraso de transición: 500 ms;
transición es una propiedad general que le permite enumerar las primeras cuatro propiedades en el orden: propiedad, duración, función de sincronización, retraso.
Transición: color de fondo 1s cúbico-bezier(0, 0, 1, 1) 500ms;
Obtuvimos esta animación simple: cuando pasas el mouse sobre el cuadrado, el ancho cambia; la duración de la animación es de un segundo; la animación se reproduce según una función lineal; Retraso antes de que comience la animación 500 milisegundos.
Con las transiciones CSS puedes animar casi todas las propiedades y crear muchas animaciones interesantes, hermosas, funcionales e incluso complejas que complementarán y mejorarán tu proyecto. Por ejemplo, hice este Material-FAB en CSS puro usando transiciones:
animaciones CSS
Las animaciones CSS te permiten crear animaciones más complejas que las transiciones CSS. Todo el secreto está en @keyframes. La regla @keyframes le permite crear animaciones utilizando un conjunto de fotogramas clave, es decir, describe el estado de un objeto en un momento determinado. Veamos un ejemplo sencillo.
Nuestro círculo ha cobrado vida y parece palpitar.
Hay 9 propiedades que te permiten controlar las animaciones CSS:
- nombre-animación;
- duración de la animación;
- función de sincronización de animación;
- retraso de animación;
- recuento de iteraciones de animación;
- dirección-animación;
- estado de reproducción de animación;
- modo de relleno de animación;
- animación;
nombre-animación- aquí está el nombre de la animación que asocia la regla @keyframes con el selector.
Nombre de la animación: mi-animación;
@keyframes mi-animación ( 0% ( opacidad: 0; ) 100% ( opacidad: 1; ) ) animación-iteración-recuento
- establece el número de repeticiones de la animación, el valor predeterminado es 1. El valor infinito significa que la animación se reproducirá sin cesar.
Recuento de iteraciones de animación: 2; dirección-animación
- establece la dirección de la animación.
Dirección de animación: inversa; animación-reproducir-estado
- esta propiedad controla la parada y reproducción de la animación. Hay dos valores, en ejecución (la animación se reproduce, de forma predeterminada) y en pausa (detiene la animación).
Estado de reproducción de animación: pausado; modo de relleno de animación
- - establece qué propiedades CSS se aplicarán al objeto antes o después de la animación. Puede tomar los siguientes valores:
- none: las propiedades CSS animadas se aplicarán al objeto solo mientras se reproduce la animación y, al finalizar, el objeto volverá a su estado original;
- al revés: las propiedades CSS animadas se aplicarán al objeto antes de que comience a reproducirse la animación;
- ambos: las propiedades CSS animadas se aplicarán al objeto antes y después de que finalice la animación;
Modo de relleno de animación: hacia atrás;
Propiedades duración de la animación, función de sincronización de animación, retardo de animación Funcionan de la misma manera que propiedades similares en las transiciones CSS, sobre las que escribí anteriormente, así que no las repetiré.
Con las animaciones CSS puedes crear animaciones bastante complejas sin necesidad de utilizar JavaScript. Un ejemplo llamativo son los cargadores, es decir, elementos que muestran que algo se está cargando en tu página. A continuación se muestran algunos ejemplos:
Módulo de ruta de movimiento
Motion Path Module CSS le permite crear movimiento de objetos a lo largo de un camino a través de la propiedad especial de camino de movimiento. Anteriormente, dicha animación sólo se podía realizar mediante SVG o scripts complejos.
Esta especificación tiene 3 propiedades:
- camino de movimiento;
- desplazamiento de movimiento;
- movimiento-rotación;
trayectoria de movimiento- esta propiedad le permite especificar los puntos (coordenadas) a lo largo de los cuales se moverá el objeto. La sintaxis es la misma que la del atributo de ruta SVG.
Ruta de movimiento: ruta("M 235.323 Q 412.440 365.615 Q 400.300 670.240 L 870.340 L 975.535 Q 730.600 630.535 z");
desplazamiento de movimiento- esta propiedad pone un objeto en movimiento desde el punto inicial hasta el punto final. Acepta el doble de longitud o un porcentaje. Para que el objeto comience a moverse, es necesario definir una animación que irá del 0 al 100%.
@keyframes vuelo-avión ( 0% (desplazamiento de movimiento: 0; ) 100% (desplazamiento de movimiento: 100%; ) )
rotación de movimiento- esta propiedad le permite especificar hacia qué lado se moverá el objeto. Puede especificar el valor automático, inverso o su propio valor en grados ("-45 grados", "30 grados", etc.).
Rotación de movimiento: automática;
Desafortunadamente, Motion-path actualmente sólo es compatible con Chrome y Opera, pero esperemos que otros navegadores sigan pronto su ejemplo, porque es realmente útil.
Para aquellos que aún no han entendido cómo funciona esto, o quieren entenderlo mejor, hice un ejemplo (enlace al código abierto).
La propiedad de transformación CSS (de la palabra "transformación") le permite modificar un elemento en páginas HTML. Por ejemplo, puedes
- girar
- desplazar
- cambiar escala
- no poder
- combinar los pasos anteriores
Gracias a esta propiedad, puedes crear efectos interesantes sin utilizar JavaScript, lo que te permite acelerar el navegador. También es importante señalar que es posible combinar el efecto con retrasos temporales.
1. Sintaxis de transformación CSS
transformar: transformar1 [transformar2];
Se permiten varias acciones con un objeto simultáneamente (por ejemplo, rotar, desplazar y cambiar la escala).
Una nota sobre los navegadoresNo todos los navegadores admiten la transformación. Debe utilizar prefijos CSS del proveedor:
- -ms-transform: para IE9 y versiones anteriores (inferiores a la versión 9, no se admite la transformación)
- -webkit-transform - para Chrome, Safari, Android e iOS
- -o-transform - para Opera hasta la versión 12.10
- -moz-transform - para Firefox hasta la versión 16.0
2. transformar:rotar(x) - rotación de objetos
Para rotar un elemento hay un comando rotar(x). Le permite rotar un objeto x grados en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj. El valor de x debe especificarse en grados
Ejemplo #1. Rotar un objeto en html mediante transformación.
altura: 100 px;
antecedentes: # 444;
margen: 30px;
-ms-transform: rotar (20 grados);
-webkit-transform: rotar (20 grados);
-o-transformar: rotar (20 grados);
Nota
Propiedades:
-ms-transform: rotar (20 grados); -webkit-transform: rotar (20 grados); -o-transformar: rotar (20 grados); -moz-transform: rotar (20 grados);
Para una rotación suave (o en otras palabras, suavizado), necesita establecer una propiedad de transición más. Esta propiedad es responsable del efecto de sincronización y suavizado. Este ejemplo considera el caso más simple con una transición en 1 segundo con velocidad lineal
Nota
altura: 100 px;
antecedentes: #888;
margen: 30px;
-ms-transform: rotar (20 grados);
Nota
-o-transformar: rotar (20 grados);
-moz-transform: rotar (20 grados);transformar: rotar (20 grados);
transición: todos los 1 lineales;
-webkit-transition: todos los 1 lineales;
-o-transición: todos los 1 lineales;
Nota
Al pasar el cursor, el cuadrado se hace más grande horizontalmente en un 50% (coeficiente 1,5) y verticalmente en un 30% (coeficiente 1,3). Un valor de 1 significa que no hay escala. Cualquier valor menor que 1 significará que el objeto se está haciendo más pequeño.
-moz-transform: rotar (20 grados);Si necesita aplicar una transformación a lo largo de solo uno de los ejes, puede usar un caso más especial: escalaX(x) - escalar a lo largo de X, escalaY(y) - escalar a lo largo de Y.
5. transformar: sesgar - inclinación del objeto
El comando para inclinar un objeto es skew(x,y) , donde los argumentos entre paréntesis son la pendiente a lo largo de los ejes X e Y, respectivamente. La pendiente debe especificarse en grados.
Ejemplo #6. Inclinar objetos en html
Nota
Cuando se coloca sobre él, el cuadrado se transforma en un diamante gracias a la inclinación.
-moz-transform: rotar (20 grados);Si necesita aplicar una transformación a lo largo de solo uno de los ejes, puede usar un caso más especial: skewX(x) - pendiente en X, skewY(y) - pendiente en Y.
6. Combinando valores de transformación
Es hora de observar los efectos interesantes que se pueden lograr combinando diferentes transformaciones. Apliquemos tres acciones a la vez para cambiar el objeto: escalar (escalar), rotar (rotar) y trasladar (traducir).
Ejemplo #7. Combinando valores de transformación
Valor inicial: cuadrado con borde negro. Cuando pases el cursor sobre él, girará formando un círculo con un marco rojo y cambiará de color.
Nota
7. Otros valores de transformación
Hemos analizado los valores de transformación más básicos. Consideremos otras posibilidades.
- ninguno: sin transformación (está habilitado de forma predeterminada);
- matriz(x,x,x,x,x,x) - Transformación 2D usando una matriz de 6 valores;
- matriz3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x)- Transformación 3D utilizando una matriz de 16 valores;
- traducir3d(x,y,z) - movimiento 3d (en comparación con el movimiento normal, aquí se agrega una tercera coordenada);
- scale3d(x,y,z) - escala en 3d (en comparación con la escala normal, aquí se agrega una tercera coordenada);
- rotar3d(x,y,z) - rotación en 3d (en comparación con la rotación normal, aquí se agrega una tercera coordenada);
- rotarX(x) - rotación 3d a lo largo del eje X;
- rotarY(x) - rotación 3d a lo largo del eje Y;
- rotarZ(x) - rotación 3d a lo largo del eje Z;
- perspectiva(n) - perspectiva para transformar el elemento 3D;
En JavaScript, la propiedad de transformación CSS está disponible a través de las siguientes propiedades:
object.style.transform="Transformación" document.getElementById("elementID").style.transform = ""
Es posible que se pregunte "¿por qué utilizar la transformación cuando simplemente puede cambiar los datos del objeto según lo necesitemos, por ejemplo, cambiando el tamaño del objeto?" La diferencia es que la propiedad de transformación no desplaza otros elementos de la página durante la transformación. En el caso de un simple cambio en el tamaño de un objeto, esto conduce inevitablemente a un desplazamiento de los objetos vecinos, lo que, por regla general, es feo.
animación CSS3 Da dinamismo a los sitios. Da vida a las páginas web, mejorando la experiencia del usuario. A diferencia de las transiciones CSS3, la creación de animaciones se basa en fotogramas clave, que le permiten reproducir y repetir efectos automáticamente durante un tiempo determinado, así como detener la animación dentro de un bucle.
La animación CSS3 se puede utilizar para casi todos los elementos html, así como para los pseudoelementos:antes y:después. La lista de propiedades animadas se encuentra en la página. A la hora de crear animaciones, no te olvides de los posibles problemas de rendimiento, ya que cambiar algunas propiedades requiere muchos recursos.
Introducción a la animación CSS
Soporte del navegador
ES DECIR: 10.0
Firefox: 16.0, 5.0 -moz-
Cromo: 43.0, 4.0 -kit web-
Safari: 4.0 -kit web-
Ópera: 12.1, 12.0 -o-
iOSSafari: 9, 7.1 -kit web-
Ópera Mini: —
Navegador de Android: 44, 4.1 -kit web-
Cromo para Android: 44
1. Regla @keyframes
La creación de animaciones comienza con la instalación. fotogramas clave Reglas de @keyframes. Los marcos determinan qué propiedades se animarán en cada paso. Cada marco puede incluir uno o más bloques de declaración de uno o más pares de propiedad y valor. La regla @keyframes contiene el nombre de la animación del elemento, que vincula la regla y el bloque de declaración del elemento.
@keyframes sombra (de (text-shadow: 0 0 3px negro;) 50% (text-shadow: 0 0 30px negro;) a (text-shadow: 0 0 3px negro;) )
Los fotogramas clave se crean utilizando las palabras clave desde y hasta (equivalentes a los valores 0% y 100%) o utilizando puntos porcentuales, que pueden especificarse tantos como desee. También puede combinar palabras clave y puntos porcentuales. Si los marcos tienen las mismas propiedades y valores, se pueden combinar en una sola declaración:
@keyframes mover ( desde, hasta ( arriba: 0; izquierda: 0; ) 25%, 75% (arriba: 100%;) 50% (arriba: 50%;) )
Si no se especifican fotogramas del 0% o del 100%, el navegador del usuario los crea utilizando los valores calculados (establecidos originalmente) de la propiedad animada. Si dos fotogramas clave tienen los mismos selectores, el siguiente cancelará el anterior.
Una vez declarada la regla @keyframes, podemos hacer referencia a ella en la propiedad de animación:
H1 (tamaño de fuente: 3,5 em; color: magenta oscuro; animación: entrada y salida infinita de Shadow 2;)
No se recomienda animar valores no numéricos (con raras excepciones), ya que el resultado en el navegador puede ser impredecible. Tampoco debe crear fotogramas clave para valores de propiedad que no tengan un punto medio, como valores de propiedad color: pink y color: #ffffff, width: auto y width: 100px, o border-radius: 0 y border- radio: 50% (en este caso, sería correcto especificar radio de borde: 0%).
2. Nombre de la animación nombre-animación
La propiedad especifica el nombre de la animación. El nombre de la animación se crea en la regla @keyframes. Se recomienda utilizar un nombre que refleje la esencia de la animación, y puede utilizar una o más palabras unidas entre sí mediante un espacio o el carácter de subrayado _. La propiedad no se hereda.
Sintaxis
Div (nombre de la animación: mymove;)
3. Duración de la animación duración de la animación
La propiedad establece la duración de la animación, en segundos o milisegundos, no se permiten valores negativos. No heredado. Si tiene más de una animación configurada para un elemento, puede establecer un tiempo diferente para cada una enumerando los valores separados por comas.
Sintaxis
Div (duración de la animación: 2 s;)
4. Función de sincronización animación-función de sincronización
La propiedad define el cambio de velocidad desde el inicio hasta el final de la animación utilizando funciones de sincronización. Se especifica mediante palabras clave o una curva de Bézier cúbica-bezier(x1, y1, x2, y2) . No heredado.
| función de sincronización de animación | |
|---|---|
| Valores: | |
| facilidad | La característica predeterminada es que la animación comienza lenta, se acelera rápidamente y se ralentiza al final. Corresponde a cúbico-bezier(0.25,0.1,0.25,1) . |
| lineal | La animación se produce de manera uniforme durante todo el tiempo, sin fluctuaciones de velocidad. Corresponde a cúbico-bezier(0,0,1,1) . |
| facilidad de entrada | La animación comienza lentamente y luego se acelera suavemente al final. Corresponde a cúbico-bezier(0.42,0,1,1) . |
| facilitar la salida | La animación comienza rápidamente y se ralentiza suavemente al final. Corresponde a cúbico-bezier(0,0,0.58,1) . |
| facilidad de entrada y salida | La animación comienza lentamente y termina lentamente. Corresponde a cúbico-bezier(0.42,0,0.58,1) . |
| Bézier cúbico (x1, y1, x2, y2) | Le permite establecer manualmente valores de 0 a 1. Puede construir cualquier trayectoria de velocidad de cambio de animación. |
| paso a paso | Establece la animación paso a paso, dividiendo la animación en segmentos; los cambios ocurren al comienzo de cada paso. Equivalente a los pasos (1, inicio). |
| final de paso | Animación paso a paso, los cambios se producen al final de cada paso. Equivalente a los pasos (1, final). |
| pasos(número de pasos,inicio|fin) | Una función de tiempo de paso que toma dos parámetros. El número de pasos se especifica mediante un número entero positivo. El segundo parámetro es opcional; especifica el momento en el que comienza la animación. Con el valor start la animación comienza al principio de cada paso, con el valor end al final de cada paso con un retraso. La latencia se calcula dividiendo el tiempo de la animación por el número de pasos. Si no se especifica el segundo parámetro, se utiliza el valor predeterminado end. |
| inicial | Establece el valor de la propiedad en el valor predeterminado. |
| heredar | Hereda el valor de la propiedad del elemento padre. |
Sintaxis
Div (función de sincronización de animación: lineal;)
La animación paso a paso se puede utilizar para crear efectos interesantes, como texto impreso o un indicador de carga.
5. Animación con retraso animación-retraso
La propiedad ignora la animación durante un período de tiempo específico, lo que permite ejecutar cada animación por separado. Un retraso negativo inicia la animación desde un cierto punto dentro de su ciclo, es decir, desde el momento especificado en el retraso. Esto le permite aplicar animación a múltiples elementos desfasados cambiando solo el tiempo de retardo.
Para que la animación comience desde el medio, debe establecer un retraso negativo igual a la mitad del tiempo establecido en duración de la animación. No heredado.
Sintaxis
Div (retraso de animación: 2 s;)
6. Repetir animación animación-iteración-recuento
La propiedad le permite ejecutar la animación varias veces. Un valor de 0 o cualquier número negativo elimina la reproducción de la animación. No heredado.
Sintaxis
Div (animación-iteración-recuento: 3;)
7. Animación-dirección
La propiedad especifica la dirección en la que se repite la animación. Si la animación sólo se repite una vez, entonces esta propiedad no tiene significado. No heredado.
Sintaxis
Div (animación-dirección: alternativa;)
8. Breve grabación de la animación.
Todos los parámetros de reproducción de animación se pueden combinar en una propiedad: animación, enumerándolos separados por un espacio:
Animación: nombre de la animación duración de la animación función de sincronización de la animación retardo de la animación recuento de iteraciones de la animación dirección de la animación;
Para reproducir la animación, basta con especificar solo dos propiedades: nombre de la animación y duración de la animación; las propiedades restantes tomarán sus valores predeterminados. El orden en el que se enumeran las propiedades no importa, lo único es que el tiempo de ejecución de la duración de la animación debe ser anterior al retraso del retardo de la animación.
9. Reproducción de animación animación-reproducción-estado
La propiedad controla la reproducción y parada de la animación. Es posible detener la animación dentro de un bucle utilizando esta propiedad en un script JavaScript. También puede detener la animación cuando pasa el mouse sobre un objeto: state:hover . No heredado.
Sintaxis
Div:hover (estado de reproducción de animación: pausado;)
10. Estado del elemento antes y después de reproducir la animación modo de relleno de animación
La propiedad determina el orden en el que se aplican al objeto los estilos definidos en @keyframes. No heredado.
| Estado de reproducción de animación: pausado; | |
|---|---|
| Valores: | |
| ninguno | Valor predeterminado. El estado del elemento no cambia antes o después de que se reproduzca la animación. |
| hacia adelante | Una vez que finaliza la animación (según lo determinado por el valor de recuento de iteraciones de animación), la animación aplicará los valores de propiedad en el momento en que finalice la animación. Si el recuento de iteraciones de animación es mayor que cero, se aplican los valores para el final de la última iteración completada de la animación (no el valor para el inicio de la iteración siguiente). Si el recuento de iteraciones de animación es cero, los valores aplicados serán los que inician la primera iteración (igual que en modo de relleno de animación: hacia atrás;). |
| hacia atrás | Durante el período definido con animación-delay, la animación aplicará los valores de propiedad definidos en el fotograma clave, lo que comenzará la primera iteración de la animación. Estos son los valores de fotograma clave (cuando dirección de animación: normal o dirección de animación: alternativa) o los valores de fotograma clave (cuando dirección de animación: inversa o dirección de animación: alternativa). |
