Hacer animación CSS. El estado del elemento antes y después de que la animación se reproduzca en modo de relleno de animación. Reproduciendo animación animación-reproducción-estado

Recientemente vimos que las transiciones son simplemente una forma de animar propiedades de estilo desde original a final condición.

Entonces las transiciones en CSS son específico tipo de animación, donde:

• sólo hay dos estados: principio y fin;
• la animación no se repite;
• Los estados intermedios están controlados únicamente por una función de tiempo.

Pero ¿y si quieres?

• ¿Tiene control sobre los estados intermedios?
• repetir la animación?
• hacer diferentes tipos de animaciones para uno¿elemento?
• ¿animar una determinada propiedad sólo hasta la mitad?
• ¿Simular diferentes funciones de tiempo para diferentes propiedades?

La animación en CSS te permite hacer todo esto y más.

La animación es como una minipelícula en la que tú, como director, das instrucciones (reglas de estilo) a tus actores (elementos HTML) para diferentes escenas (fotogramas clave).

Propiedades de animación

Al igual que la transición, la propiedad de animación es una abreviatura de varias otras:

• nombre-animación: nombre de la animación;
• duración de la animación: cuánto dura la animación;
• función de sincronización de animación: cómo se calculan los estados intermedios;
• retardo de animación: la animación comienza después de un tiempo;
• animación-iteración-recuento: cuántas veces se debe ejecutar la animación;
• dirección de animación: si el movimiento va en la dirección opuesta o no;
• modo de relleno de animación: qué estilos se aplican antes de que comience la animación y después de que finalice.

Ejemplo rápido

Para animar el botón de descarga, puedes escribir una animación de rebote:

@keyframes rebotando (0% (abajo: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); ) 100% (abajo: 50px; box-shadow: 0 50px 50px rgba(0,0, 0,0.1); ).loading-button (animación: rebotando 0.5s cúbico-bezier(0.1,0.25,0.1,1) 0s infinito alternativo ambos;)

Primero necesitas escribir una animación de rebote real usando @keyframes y llamarla.

Utilicé la propiedad de animación abreviada e incluí todas las opciones posibles:

• nombre de la animación: rebote (igual que el nombre del fotograma clave)
• duración de la animación: 0,5 s (medio segundo)
• Función de sincronización de animación: Bézier cúbico (0.1,0.25,0.1,1)
• retraso de animación: 0s (sin retraso)
• animación-iteración-recuento: infinito (se reproduce sin cesar)
• dirección de animación: alternativa (va y viene)
• modo de relleno de animación: ambos

@fotogramas clave

Antes de poder aplicar animación a elementos HTML, debe escribir la animación utilizando fotogramas clave. En general, los fotogramas clave son cada paso intermedio en la animación. Se determinan mediante porcentajes:

• 0% - primer paso de la animación;
• 50% es el paso medio de la animación;
• 100% es el último paso.

También puede utilizar las palabras clave desde y hasta en lugar de 0% y 100%, respectivamente.

Puedes definir tantos fotogramas clave como quieras, como 33%, 4% o incluso 29,86%. En la práctica, sólo escribirás algunos de ellos.

Cada fotograma clave es una regla CSS, lo que significa que puedes escribir propiedades CSS como de costumbre.

Para definir una animación, simplemente escriba la palabra clave @keyframes con su nombre:

@keyframes alrededor ( 0% ( izquierda: 0; arriba: 0; ) 25% ( izquierda: 240px; arriba: 0; ) 50% ( izquierda: 240px; arriba: 140px; ) 75% ( izquierda: 0; arriba: 140px ; ) 100% ( izquierda: 0; arriba: 0; ) ) p (animación: alrededor de 4s lineal infinito; )

Tenga en cuenta que el 0% inicial y el 100% final contienen las mismas reglas CSS. Esto asegura que la animación se repite perfectamente. Dado que el contador de iteraciones está configurado en infinito, la animación pasará del 0% al 100% y luego inmediatamente atrás al 0% y así indefinidamente.

nombre-animación

El nombre de la animación se utiliza al menos dos veces:

• al escribir animaciones usando @keframes;
• cuando se utiliza animación utilizando la propiedad de nombre de animación (o la propiedad abreviada de animación).

@keyframes lo que sea ( /* ... */ ) .selector ( nombre-animación: lo que sea; )

De manera similar a los nombres de clases CSS, el nombre de la animación solo puede incluir:

• letras (a-z);
• números (0-9);
• subrayar(_);
• guión (-).

El nombre no puede comenzar con un número o dos guiones.

duración de la animación

Al igual que la duración de la transición, la duración de la animación se puede configurar en segundos (1 s) o milisegundos (200 ms).

Selector (duración de la animación: 0,5 s;)

El valor predeterminado es 0, lo que significa que no hay animación alguna.

función de sincronización de animación

Al igual que las funciones de temporización de transición, las funciones de temporización de animación pueden utilizar palabras clave como lineal, salida gradual o pueden definirse mediante curvas de Bézier arbitrarias.

Selector (función de sincronización de animación: entrada y salida fácil;)

Valor predeterminado: facilidad.

Dado que la animación en CSS utiliza fotogramas clave, puede establecer una función de tiempo lineal y simular una curva de Bézier específica definiendo muchos muy específicos fotogramas clave. Consulte Bounce.js para ver animaciones avanzadas.

retardo de animación

Al igual que con el retraso de transición, el retraso de la animación se puede configurar en segundos (1 s) o milisegundos (200 ms).

El valor predeterminado es 0, lo que significa que no hay retraso de ningún tipo.

Útil cuando se incluyen varias animaciones en una serie.

A, .b, .c (animación: rebotando 1 s;) .b (retraso de animación: 0,25 s;) .c (retraso de animación: 0,5 s;)

animación-iteración-recuento

De forma predeterminada, la animación se reproduce solo una vez (valor 1). Puede establecer tres tipos de valores:

• números enteros, como 2 o 3;
• números fraccionarios como 0,5, que sólo reproducirán la mitad de la animación;
• palabra clave infinita, que repetirá la animación sin cesar.

.selector (animación-iteración-recuento: infinito;) dirección-animación

La propiedad de dirección de animación especifica si en que orden Se leen los fotogramas clave.

• normal: comienza en 0%, termina en 100%, comienza nuevamente en 0%.
• inversa: comienza en 100%, termina en 0%, comienza nuevamente en 100%.
• alternativo: comienza en 0%, va al 100%, vuelve al 0%.
• alternativo-reverso: comienza en 100%, va a 0%, vuelve a 100%.

Esto es más fácil de imaginar si el recuento de iteraciones de la animación se establece en infinito.

modo de relleno de animación

La propiedad animación-relleno-modo determina lo que sucede antes inicio de la animación y después su finalización.

Al definir fotogramas clave, puede especificar reglas CSS que se aplicarán en diferentes pasos de la animación. Ahora estas reglas CSS pueden chocar con aquellos que ya aplicado a elementos animados.

El modo de relleno de animación le permite indicarle al navegador si estilos de animación También debe aplicarse fuera de la animación.

Imaginemos un botón que es:

• rojo por defecto;
• se vuelve azul al comienzo de la animación;
• y finalmente verde cuando se completa la animación.

La animación CSS3 hace que los sitios web sean dinámicos. 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 -webkit-
Safari: 4.0 -webkit-
Ópera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Ópera Mini: -
Navegador Android: 44, 4.1 -webkit-
Chrome para Android: 44

1. Regla @keyframes

La creación de una animación comienza estableciendo los fotogramas clave de la regla @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 un elemento tiene más de una animación especificada, 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 lenta 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.

modo de relleno de animación

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

Hola a todos. Recientemente me encontré con una serie de videos tutoriales muy útiles e interesantes sobre el tema "animación CSS". Pero es mala suerte, todos los vídeos estaban en inglés y, probablemente, no todos los maquetadores saben inglés a un nivel suficiente para comprender y asimilar toda la información necesaria. Por eso, decidí traducirte estas lecciones (o mejor dicho, hacer una traducción gratuita). No hay necesidad de agradecer. Entonces:

Animación CSS. Introducción + propiedad de transición (este artículo)

Animación CSS. Fotogramas clave: próximamente

¿Cuándo y por qué utilizar animaciones CSS? - muy pronto

¿Qué es la animación CSS?

Antes de decirle cómo hacer animaciones CSS y por qué son necesarias, primero me gustaría explicarle qué es la animación CSS, darle una definición o algo así.

Las animaciones en la web tienen dos ideas principales. La primera idea es darle vida a algo. Eres como el Dr. Frankenstein. Tienes un monstruo sin vida y le das vida. El segundo es la visualización del movimiento. Y la palabra clave aquí es “movimiento”.

¿Cómo animar?

CSS tiene dos herramientas principales con las que podemos mover elementos por una página web. La primera (de la que hablaremos más adelante) es la propiedad de transición. En primer lugar, es con su ayuda que creamos animaciones en CSS. La segunda herramienta es la propiedad de animación combinada con fotogramas clave (@keyframes). Veremos esta herramienta con más detalle en la próxima lección, pero ahora veremos la propiedad de transición CSS. Y luego hablaremos sobre qué se debe animar en la página (cuando el usuario lo necesita) y qué no se debe animar (cuando la animación parece estúpida e inapropiada), según la experiencia del usuario (UX).

Propiedad de transición CSS: parámetros y valores Sintaxis

Primero, veamos cómo se lee esta propiedad y comprendamos su sintaxis. Escribimos esta propiedad algo como esto:

transición : [ propiedad] [duración] [función de sincronización] [demora] ;

transición: altura 1 s salida suave 0,2 s;

Asignamos esta propiedad al elemento que queremos animar. Este elemento se vuelve suave. transición(o paso a paso) entre varios de sus estados (por ejemplo, altura 100 píxeles y altura 200 píxeles). Y cómo se verá este transición(del inglés transición), dependerá de los parámetros que le demos.

El primer parámetro (valor) de la propiedad de transición es otro propiedad elemento a animar (por ejemplo, altura).

El segundo parámetro es la duración (duración) de la animación, es decir, cuánto tiempo le tomará al elemento pasar de un estado a otro (por ejemplo, 2 segundos o 2000 ms).

El tercer parámetro es función de sincronización[función de sincronización] (función de relajación [función de relajación]). Cómo se distribuirá la intensidad de la animación a lo largo de todo el tiempo. Por ejemplo, una animación puede comenzar abruptamente, pero al final se ralentizará y finalizará la transición sin problemas. Se pueden utilizar como palabras clave (por ejemplo, facilidadfacilidad-en-afuera,lineal) y funciones del cubo de Bézier (por ejemplo, cúbico-Bézier(0,17, 0,67, 0,83, 0,67)). Puede personalizar fácil y cómodamente el cubo Bezier en este recurso http://cubic-bezier.com, así como la función de pasos para crear animaciones cuadro por cuadro (paso a paso).

Y finalmente el parámetro demora. El retraso de la animación es la cantidad de tiempo que hay que esperar antes de que comience la animación (en nuestro caso, una transición).

Ejemplo de animación de transición CSS

Veamos este ejemplo de animación CSS:

transición: opacidad 300 ms facilidad de entrada y salida 1 s;

Aquí animamos solo la propiedad. opacidad(opacidad). Esto significa que si el elemento que vamos a animar tiene otras propiedades, como alto, ancho o color, e incluso si estas propiedades difieren en diferentes estados del elemento, entonces solo la propiedad de opacidad tendrá una transición suave (animación). ¿Lo entiendes?

También puede utilizar la palabra clave "todos" en lugar de una propiedad específica. Esto significa que animamos absolutamente todas las propiedades del elemento que se cambiaron en el nuevo estado del elemento (no solo la opacidad) y que se pueden animar. Porque, como sabes, no todas las propiedades se pueden animar. Pero hablaremos de eso un poco más adelante.

Segundo parámetro ( 300 EM) nos dice que la animación solo durará 300 milisegundos. Es decir, el elemento aparecerá o se disolverá rápidamente, dependiendo de los valores de propiedad en sus dos estados.

Función de sincronización ( facilidad-en-afuera) con el tercer parámetro hará que el principio y el final de la animación sean más suaves.

Demora ( 1 s) muestra qué tan tarde debe llegar la animación antes de que se active.

En general, esta es la fórmula de cómo grabaremos la animación de transición. Esta es la sintaxis. Si es necesario, puede agregar más de una transición [propiedad] para un elemento. Por ejemplo, puede animar cambios en la altura y el ancho de un elemento con diferentes parámetros. Para hacer esto, en la propiedad de transición, en lugar de un punto y coma al final, coloque solo una coma y escriba los parámetros para otra propiedad. Y no olvides poner un punto y coma al final para que funcione.

¿Qué puedes animar en CSS?

Hasta ahora sólo hemos discutido la sintaxis de la propiedad de transición. Ahora hablemos de propiedades, cuáles podemos animar y cuáles no. Porque hay algunas cosas que simplemente no tiene sentido animar y algunas propiedades simplemente no se pueden animar.

Propiedades animables

Tomemos, por ejemplo, propiedades como:

tamaño de fuente;

color de fondo;

ancho;

izquierda (qué tan lejos del lado izquierdo se puede mover [posicionar] el elemento...

Obviamente, tiene sentido animar estas propiedades. Si cambia sus valores, cambiará el elemento visualmente. Si cambia el tamaño de la fuente de, digamos, 14 a 28 píxeles, verá que la fuente aumenta gradualmente de tamaño y se produce una animación que dura algún tiempo. La animación siempre tiene sentido si los valores de las propiedades son valores claros (normalmente numéricos). Si aumenta el tamaño de fuente a 100 píxeles, podrá ver claramente cómo crecen las letras. También se puede observar un cambio suave en el color de fondo [porque el color en la web tiene un código numérico, por ejemplo, rojo rgb(255,0,0)]. Estas propiedades están animadas.

En general, recuerda, si imaginas que está animado, entonces puedes animarlo. La mayoría de las veces esto funciona.

Propiedades no animables

Y aquí hay una lista de propiedades que no se pueden animar (ejemplo):

mostrar;

familia de fuentes;

posición…

Estos son algunos de ellos que tomé como ejemplo para que puedas sentir la diferencia entre propiedades CSS animables y no animables.

Hagamos exhibición. ¿Te imaginas lo visual que es el cambio entre " mostrar:bloquear;" Y " mostrar:en línea-bloquear;"? ¿Cómo puede cambiar suavemente la apariencia de un elemento entre " posición:relativo;" Y " posición:absoluto;"? No, por supuesto, el elemento se verá diferente si se cambian estas propiedades. Pero ¿cómo te imaginas? transición? No puedes hacer eso. ¿Bien? No te imaginas convertir Helvetica en Georgia, cada letra, simplemente no funcionará. Puedes cambiar estas fuentes, pero cambiarán abruptamente y no se producirá ninguna animación.

Rendimiento de animación en CSS

En general, muchas propiedades están animadas, pero algunas no. Ahora decidamos qué propiedades animables son mejores para animar y cuáles son peores. Se trata de rendimiento. Tocamos el tema de la performance porque la animación es un proceso que requiere muchos recursos.

En general, estas son las cosas que funcionan mejor para la animación:

Posicionamiento en la página

Escalada

Rotación

Transparencia

Además, los primeros tres elementos de esta lista son todos parámetros de la propiedad de transformación (traducir, escalar, rotar). El posicionamiento se produce a lo largo de los ejes X e Y.

Si decide animar algo más, corre el riesgo de no obtener la transición suave y fluida de 60 fotogramas por segundo. Paul Lewis y el irlandés

Y esto es exactamente lo que nos interesa cuando hablamos de rendimiento de animación. En general, las propiedades más adecuadas para la animación son la transformación y la opacidad. Al animar cualquier otra cosa, los fps de la animación pueden caer muy por debajo de 60 fps.

Resumamos este punto de la siguiente manera. Intente evitar volver a dibujar elementos en una página web y animar elementos que sean difíciles de representar para el navegador (por ejemplo, sombras).

¿Cómo hacer animación en CSS?

Ahora descubramos cómo iniciar la animación. Qué se debe hacer para que el elemento comience a animarse. En otras palabras, cómo hacer animaciones en CSS.

No es difícil y hay muchas formas diferentes de hacerlo. Pero hay 2 principales que debes dominar sin falta. El primer método es una animación al pasar el cursor sobre un elemento (pseudoclase: pasar el cursor). Coloca el mouse sobre un elemento y se activará una animación. De esta manera puedes animar el elemento en sí o cualquiera de sus elementos secundarios. Luego te mostraré cómo funciona. La segunda forma es cambiar la clase del elemento. Es decir, tienes un elemento normal, cambias (o agregas) su clase a una clase que tiene estilos completamente diferentes. Si agrega una clase, se producirá una animación y si elimina una clase, se producirá la animación inversa. Esta es una buena manera de animar menús o menús desplegables.

Epílogo

Hemos cubierto todo lo que necesitamos para crear animaciones usando CSS puro. Muy pronto veremos ejemplos prácticos y, un poco más tarde, ejemplos muy interesantes.

¿Leíste hasta el final?

¿Fue útil este artículo?

No precisamente

¿Qué es exactamente lo que no te gustó? ¿El artículo estaba incompleto o era falso?
¡Escribe en los comentarios y prometemos mejorar!

Muchos visitantes tienen dudas sobre cómo utilizar la biblioteca Animate.css en la práctica. En realidad, todo sucede de manera bastante simple, solo necesita pasar por todas las etapas una vez y luego, por analogía, repetir algunas acciones.

1. Primero necesitas descargar y conectar la biblioteca. Hay tres opciones.

• Versión completa. Contiene más de tres mil líneas de código con un volumen de unos 60 kB. Es muy adecuado en la primera etapa de familiarización con la animación en general, ya que le permite ver cómo funciona todo.
• Versión empaquetada (ofuscada, en términos profesionales). No hay tabulaciones, espacios ni saltos de línea en el archivo CSS. Debido a esto, el tamaño del archivo se reduce una vez y media, pero resulta difícil leer el código.
• Efectos selectivos. Es el más adecuado para la mayoría de las tareas, ya que le permite especificar sólo los efectos que desee, eliminando los innecesarios.

2. Para aplicar un efecto de animación al elemento deseado, agréguele dos clases: animada y una clase con el nombre del efecto, por ejemplo fadeInDown (consulte la lista de todos los efectos y sus nombres). Por ejemplo, digamos que desea agregar parpadeo a todas las imágenes de una página. En HTML escribimos lo siguiente:

Si el sitio usa jQuery, la adición de clases se simplifica y se realiza a través de JavaScript.

$(documento).ready(función() ( $("img").addClass("flash animado"); ))

3. La animación se activa automáticamente cuando se carga la página. Esto es útil para mensajes emergentes diseñados para atraer la atención del usuario (ejemplo 1).

Ejemplo 1: mensaje emergente

Advertencia .warning (fondo: #fc0; relleno: 10px; borde: 1px sólido #000;) ¡El número de la hora cenital estima el sextante ecuatorial!

Para que el efecto funcione cuando pasa el cursor del mouse sobre un elemento, deberá usar JavaScript. Como ejemplo, considere imágenes que se mueven cuando pasa el cursor del mouse sobre ellas. Ir a la etiqueta agregue la clase animada y conecte jQuery (ejemplo 2).

Ejemplo 2. Galería

Galería $(document).ready(function() ( $("img.animated").hover(function() ( $(this).addClass("bounce"); // Agrega la clase de rebote), function() ( $(this).removeClass("bounce"); // Elimina la clase ))))

En este ejemplo, cuando pasa el cursor sobre una imagen con la clase animada, se agrega otra clase de rebote; si se elimina el cursor, también se elimina la clase de rebote.

4. Finalmente, puedes personalizar la animación a tu gusto cambiando la velocidad de la animación y también configurando el tiempo de retardo a través de CSS. Ambos son opcionales y se pueden utilizar si es necesario.

Animado ( -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; Animation-duration: .6s; -webkit-animation-delay: 1s; -o -retraso-animación: 1s; -retraso-animación-moz: 1s;

Todos los navegadores modernos, excepto IE9, admiten transiciones CSS y animaciones CSS, lo que le permite implementar animaciones usando CSS, sin involucrar JavaScript. La animación se aplica a cualquier elemento html, así como a los pseudoelementos :before y :after

Soporte del navegador

Es decir: 10,0
Firefox: 16.0, 5.0 -moz-
Cromo: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Ópera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Ópera Mini: -
Navegador Android: 44, 4.1 -webkit-
Chrome para Android: 44

Para utilizar la animación en tu proyecto, sólo necesitas hacer dos cosas:

Cree la animación misma usando la palabra clave @keyframes

Conéctelo al elemento que necesita ser animado y especifique las propiedades necesarias.

regla @keyframes

La regla @keyframes le permite crear animaciones utilizando fotogramas clave: los estados de un objeto en un momento determinado.

Los fotogramas clave de animación se crean utilizando las palabras clave desde y hasta (equivalentes a 0% y 100%) o utilizando puntos porcentuales, que se pueden establecer tantos como desee. También puede combinar palabras clave y puntos porcentuales.

Si no se especifica el fotograma inicial (desde, 0%) o final (hasta, 100%), el navegador establecerá los valores calculados de las propiedades animadas en lo que serían si no se aplicara ninguna animación.

Si dos fotogramas clave tienen los mismos selectores, el siguiente cancelará el anterior.

Al definir una animación, la propiedad @keyframes debe ir seguida inmediatamente del nombre de la animación (este nombre debe luego especificarse en la propiedad de animación del elemento que será animado).

@keyframes mover ( desde ( transformar: traducirX(0px); ) 50% ( transformar: traducirX(130px); ) 100% ( transformar: traducirX(0px); ) )

@keyframes mover ( de( 50% { 100% { transformar: traducirX(0px);

Hemos creado una animación que funciona así:

El comienzo de la animación (de podría escribirse 0%): la posición del elemento a lo largo del eje X es 0px;

Mitad de la animación (50%): la posición del elemento a lo largo del eje X es 130px;

Fin de la animación (usamos 100%): devolvemos el elemento al comienzo de la animación, es decir. la posición del eje X del elemento es 0px;

Aquí y a continuación, para mayor comodidad, escribí en los ejemplos varias líneas de JavaScript que alternativamente agregarán o eliminarán una clase con animación en un elemento, por lo que para reproducir la animación, simplemente haga clic en este elemento.

Los fotogramas clave se pueden agrupar:

@keyframes mover ( desde ( transformar: traducirX(0px); ) 25%, 50% ( transformar: traducirX(130px); ) 100% ( transformar: traducirX(0px); ) )

@keyframes mover ( de( transformar: traducirX(0px); 25%, 50% { transformar: traducirX(130px); 100% { transformar: traducirX(0px);

Puedes asignar varias animaciones a un elemento; sus nombres y parámetros deben escribirse en el orden de asignación:

elemento (nombre-animación: animación-1, animación-2; duración-animación: 2s, 4s;)

elemento( nombre-animación: animación-1, animación-2; duración de la animación: 2s, 4s;

La conexión de la animación a un elemento se realiza mediante dos comandos: nombre de la animación y duración de la animación.

Nombre de la animación

La propiedad nombre de animación especifica el nombre de la animación. Se recomienda utilizar un nombre que refleje la esencia de la animación, y puede utilizar una palabra o varias, unidas entre sí mediante un espacio o un guión bajo _.

nombre-animación: mover;

Función de tiempo

La propiedad animación-timing-function le permite configurar una función especial responsable de la velocidad de reproducción de la animación. Tenga en cuenta que la velocidad de reproducción de la animación suele ser no lineal, es decir. su velocidad instantánea en diferentes áreas será diferente. Actualmente hay varios argumentos integrados para esta regla: facilidad, facilidad de entrada, facilidad de salida, facilidad de entrada y salida, lineal, inicio por pasos, final por pasos.

Sin embargo, usted mismo puede crear dichas funciones. Función especial cúbica-bezier (P1x, P1y, P2x, P2y);

toma cuatro argumentos y construye una curva de distribución de valores basada en ellos durante el proceso de animación. Puedes practicar la creación de tus propias funciones y ver cómo funcionan en este sitio.

• Finalmente, la animación se puede convertir en un conjunto de valores discretos usando la función de pasos (número de pasos, dirección), cuyos argumentos son el número de sus pasos y la dirección, que pueden tomar los valores inicio o fin.
• facilidad es la función predeterminada, la animación comienza lenta, se acelera rápidamente y se ralentiza al final. Corresponde a Bézier cúbico (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 Bézier cúbico (0,42,0,1,1).
• relajación: 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) - ver arriba.

heredar: hereda esta propiedad del elemento padre.

Comparación visual

La propiedad de retardo de animación define el retraso antes de que comience a reproducirse la animación, establecido en segundos o milisegundos. 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. Si desea que la animación comience desde el medio, establezca un retraso negativo igual a la mitad del tiempo establecido en duración de la animación. No heredado.

elemento (nombre-animación: animación-1; duración-animación: 2 s; retraso-animación: 10 s; // Pasarán 10 segundos antes de que comience esta animación)

Repetir animación

La propiedad Animation-iteration-count le permite ejecutar una animación varias veces. No heredado. Establecemos el valor en cualquier valor positivo 1, 2, 3... etc. o infinito para una repetición infinita. Un valor de 0 o cualquier número negativo elimina la reproducción de la animación.