CSS es una de las formas más poderosas de hacer que la página web sea interactiva. Transforma el aspecto y la sensación de nuestro básico página web. Una de las características importantes y emocionantes que ofrece CSS es que nos permite realizar animaciones. Nos permite mover los elementos dentro de nuestra página. Comencemos nuestro viaje de animaciones en CSS en el siguiente orden:
Animaciones en CSS
Agregar animaciones a nuestro sitio web es una excelente manera de llamar la atención de los usuarios. No solo agrega valor a nuestra página, sino que también enriquece la experiencia del usuario. La animación en CSS se basa en dos partes. Son
- Fotogramas clave
- Animación
Las animaciones CSS son compatibles con todos los navegadores. Sin embargo, algunos navegadores más antiguos como Safari (hasta la versión 8.0) requieren el prefijo (-webkit-) para interpretar las propiedades de la animación. Por ejemplo:
.anim {altura: 200px ancho: 200px fondo: azul claro posición: radio de borde relativo: 100% -webkit-animation-name: cssanim / * navegadores antiguos * / -webkit-animation-duration: 5s / * navegadores antiguos * / animación -name: cssanim animation-duration: 5s} / * navegadores antiguos * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Podemos usar la página html de muestra de arriba y reemplazar el código CSS en la etiqueta de estilo para probar más ejemplos.
cómo convertirse en ingeniero de inteligencia artificial
Fotogramas clave en CSS
Este es el componente básico de las animaciones en CSS. Solía definir momentos y estilos específicos de la animación en nuestra página web. En otras palabras, cuando especificamos @keyframes dentro de nuestro CSS, obtiene el control para modificar el estado actual a un nuevo estado o animar los objetos durante un tiempo determinado.
Los @keyframes deben tener ciertas propiedades para controlar la animación, como el nombre de la animación, las etapas y las propiedades.
Nombre - Se requiere un nombre para cada animación para describir su comportamiento.
Etapas - El escenario representa la finalización de una animación. Se puede hacer denotado con la palabra clave 'a' y 'desde' o como un porcentaje, mientras que 0% representa el estado inicial y 100% representa el estado final de una animación. El beneficio de usar la representación porcentual es que podemos definir múltiples etapas intermedias entre, es decir, cuál debería ser el comportamiento de la animación al 50% o al 75%, etc.
Propiedades - Estas propiedades nos dan control sobre los @keyframes para manipularlos durante la animación.
.anim {altura: 200px ancho: 200px fondo: azul claro posición: radio de borde relativo: 100% nombre-animación: cssanim duración-animación: 5s} @keyframes cssanim {0% {transform: scale (0.5) opacity: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}Ahora que tenemos claro la definición de fotogramas clave. Exploremos las propiedades de la animación para describir cómo animar nuestros elementos y objetos. Las dos propiedades, es decir, heredar e inicial, se pueden usar con todos los tipos de animación. Estas propiedades se usan generalmente junto con la etiqueta div para exhibir diferentes comportamientos.
inicial: Establece esta propiedad en su valor predeterminado.
heredar: Hereda esta propiedad de su elemento padre.
Propiedades de animación
- animación-nombre
Especifica el nombre de la animación, que se utiliza en @keyframes para manipular.Los posibles valores son:
- nombre: Esto especifica el nombre que se vinculará al fotograma clave para la animación.
- ninguna: Este es el valor predeterminado y se puede utilizar para anular las animaciones heredadas o en cascada.
Sintaxis:
animación-nombre: nombre | ninguno | inicial | heredar
.anim {altura: 200px ancho: 200px fondo: azul claro posición: radio relativo del borde: 100% nombre-animación: cssanim duración-animación: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- duración de la animación
Especifica el tiempo que tarda una animación en completar una ejecución. Se define en segundos o milisegundos (por ejemplo, 4 o 400 ms). El valor predeterminado de esta propiedad es 0, por lo que si no se especifica esta propiedad, la animación no se llevará a cabo.
Sintaxis:
animación-duración: tiempo
.anim {altura: 200 px ancho: 200 px fondo: azul posición: borde relativo radio: 100% animación-nombre: cssanim animación-duración: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: scale (1)}}- retardo de animación
La propiedad animation-delay nos permite especificar el retraso en la animación. Define cuándo comenzará la ejecución de una secuencia de animación.
El valor de esta propiedad se puede declarar en segundos (s) o milisegundos (ms). Puede contener valores tanto positivos como negativos. Un valor positivo indica que la animación comenzará después de que pase el tiempo especificado y hasta entonces permanecerá inanimado. Por otro lado, un valor negativo iniciará inmediatamente la animación desde el punto como si ya se hubiera estado ejecutando durante un período de tiempo específico.
Sintaxis:
animation-delay: tiempo
.anim {altura: 200px ancho: 200px fondo: azul claro posición: radio de borde relativo: 100% nombre-animación: cssanim duración-animación: 4s retraso-animación: 4s} @keyframes cssanim {0% {izquierda: 0px} 100% {left: 250px}}- recuento de iteraciones de animación
Esta propiedad indica el número de veces que se debe reproducir una secuencia de animación. El valor predeterminado de esta propiedad es 1.Los posibles valores son:
- número - denota el número de iteraciones
- infinito - indica que la animación debe repetirse para siempre
Sintaxis:
recuento-iteración-animación: número | infinito
.anim {altura: 200px ancho: 200px fondo: azul claro posición: radio de borde relativo: 100% nombre-animación: cssanim duración-animación: 2s recuento-iteración-animación: 4} @keyframes cssanim {0% {izquierda: 0px} 100% {left: 100px}}- dirección de animación
Define la dirección de la animación. La dirección del elemento se puede configurar para que se reproduzca hacia adelante, hacia atrás o en ciclos alternos.El valor predeterminado de esta propiedad es normal y se restablece en cada ciclo.Los posibles valores son:
normal - Este es el comportamiento predeterminado y la animación se reproduce hacia adelante. Después de cada ciclo, la animación llega a su estado inicial y se reproduce hacia adelante nuevamente.
marcha atrás - La animación se reproduce hacia atrás. Después de cada ciclo, la animación llega a su estado final y se reproduce hacia atrás.
alterno - La dirección de la animación se invierte, es decir, se reproduce primero hacia adelante y luego hacia atrás en cada ciclo. Cada ciclo impar genera una animación hacia adelante y cada ciclo par genera un movimiento hacia atrás.
alternativo-inverso - La dirección de la animación se invierte alternativamente. Aquí la animación se reproduce primero hacia atrás y luego hacia adelante en cada ciclo. Cada ciclo impar se mueve hacia atrás o hacia atrás y cada ciclo par muestra una animación hacia adelante.
Sintaxis:
animación-dirección: normal | reverso |alterno | alternativo-inverso
.anim {altura: 200px ancho: 200px fondo: azul claro posición: radio de borde relativo: 100% nombre-animación: cssanim duración-animación: 2s recuento-iteración-animación: infinito} @ fotogramas clave cssanim {0% {izquierda: 0px} 100% {left: 100px}}- función de tiempo de animación
Esta propiedad determina la curva de velocidad o el estilo de movimiento de la animación. Está asignado para realizar el cambio en el estilo de animación sin problemas de un formulario a otro. Si no se asigna ningún valor, el valor predeterminado es facilidad.Los valores posibles para la función de tiempo de animación son:
facilitar - Este es el valor predeterminado de la propiedad. Aquí la animación comienza lenta, gradualmente se vuelve rápida en el medio y luego termina lentamente nuevamente.
lineal - La animación mantiene la misma velocidad durante todo el ciclo, es decir, de principio a fin.
facilidad en - La animación comienza lentamente.
Facilitarse - La animación termina lentamente.
facilidad de entrada - La animación se mueve lentamente tanto al inicio como al final.
cubic-bezier (n, n, n, n) - Esta característica avanzada nos permitió crear una función de temporización personalizada definiendo nuestros propios valores. El valor posible varía de 0 a 1.
las funciones que difieren solo en su tipo de retorno no se pueden sobrecargar
Sintaxis:
función-tiempo-animación: lineal | facilidad | facilidad de salida | facilidad de entrada | facilidad de entrada y salida |cubic-bezier (n, n, n, n)
.anim {altura: 200px ancho: 200px fondo: azul claro posición: radio de borde relativo: 100% nombre-animación: cssanim duración-animación: 2s dirección-animación: reverso} @ keyframes cssanim {0% {fondo: naranja izquierda: 0px } 50% {fondo: amarillo a la izquierda: 200 px arriba: 200 px} 100% {fondo: azul a la izquierda: 100 px}}- modo de relleno de animación
Esta es una propiedad especial ya que determina el estilo de animación antes o después de que se reproduzca la animación.Como por defecto, el estilo del elemento no se ve afectado por la animación antes del comienzo o después de su finalización. Esta propiedad es útil ya que ayuda a anular este comportamiento predeterminado de la animación.Los siguientes son valores posibles para la propiedad animation-fill-mode:
ninguna - Este es el valor predeterminado de la propiedad, es decir, los estilos de animación no se aplican al elemento, antes o después de la animación.
hacia adelante - El elemento conserva los estilos en la secuencia de animación final, es decir, una vez finalizada la animación.
hacia atrás - Los estilos son retenidos por el elemento en la secuencia de animación inicial, es decir, antes de que comience la animación, particularmente durante el retraso de la animación.
ambos - Esto significa que la animación seguirá tanto en la dirección, es decir, hacia adelante como hacia atrás
Sintaxis:
modo de relleno de animación: ninguno | adelante | al revés | ambos
.anim {ancho: 50px alto: 50px fondo: azul claro color: blanco peso de fuente: negrita posición: nombre-animación relativo: cssanim duración-animación: 5s recuento-iteración-animación: radio de borde infinito: 100%} # anim1 { animación-función-temporización: facilidad} # anim2 {animación-función-temporización: lineal} # anim3 {animación-función-temporización: facilidad-entrada} # anim4 {animación-función-temporización: facilidad-salida} # anim5 {animación- función de sincronización: facilidad de entrada-salida} @keyframes cssanim {de {izquierda: 0px} a {izquierda: 400px}}- estado de juego de animación
Esta propiedad especifica que una animación esté en reproducción o en estado de pausa. Además, cuando una animación se reanuda desde la pausa, comienza desde donde se quedó.Los posibles valores son:
- jugando - Para renderizar la animación en ejecución.
- pausado - Para renderizar la animación en estado de pausa.
Sintaxis:
estado de reproducción de animación: en pausa | jugando
.anim {ancho: 100px alto: 100px fondo: azul claro posición: relativa animación-nombre: cssanim animación-duración: 3s animación-retardo: 2s animación-modo-relleno: borde hacia atrás-radio: 100%} @ keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animación
Esto se conoce como propiedad abreviada de animación. Se utiliza para un código más limpio. Una vez que nos acostumbramos a todas las propiedades de la animación, se aconseja que usemos la abreviatura de la animación para codificar más rápido y definir todas las propiedades en una sola línea.
Sintaxis:
animación: [nombre-animación] | [duración de la animación] | [función de tiempo de animación] |[retardo de animación] | [recuento-iteración-animación] | [dirección de animación] |[modo de relleno de animación] | [estado de reproducción de animación]
Todos los efectos de animación que mostramos arriba usando diferentes propiedades de animación se pueden lograr usando la abreviaturaanimación propiedad.
.anim {altura: 200px ancho: 200px fondo: azul claro posición: radio de borde relativo: 100% nombre-animación: cssanim duración-animación: 2s dirección-animación: estado normal animación-reproducción: pausa} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Esto concluye todas las propiedades de animación que se pueden usar en CSS. Deberíamos probar diferentes variaciones de estas propiedades para obtener una imagen más clara. Cuando nos sentimos cómodos, la propiedad abreviada de animación puede ser de gran ayuda para escribir código más limpio y rápido. Esta es una de las habilidades importantes que deben aprender los desarrolladores web en CSS. Dado que tendemos a centrarnos más en objetos en movimiento que en estáticos, las animaciones pueden ayudarnos a lograrlo y también a desarrollar páginas web extraordinarias.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo convierte en un experto en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios del blog “Animaciones en CSS” y nos comunicaremos con usted.