Home-theater-designers
CSS brinda a los desarrolladores la capacidad de dar vida a sus páginas web mediante la animación de fotogramas clave.
La animación CSS se logra alterando el estado inicial de un elemento HTML a través de sus diversas propiedades. Algunas propiedades CSS generales que se pueden animar incluyen:
¿Puedo actualizar la memoria en macbook pro?
- Ancho
- Altura
- Posición
- Color
- Opacidad
Estas propiedades CSS generales son manipuladas por elementos CSS específicos para crear el resultado deseado. Si alguna vez se ha encontrado con un elemento animado en una página web, es probable que el elemento haya sido animado mediante la animación de fotogramas clave.
¿Qué es un elemento de fotogramas clave?
los elemento de fotogramas clave se puede utilizar en uno o más elementos HTML a los que tiene acceso. Identifica un punto específico en el estado de un elemento y dicta la apariencia que este elemento debe tener en ese momento.
Esto puede parecer mucho para digerir, pero en realidad es bastante simple. los elemento de fotogramas clave tiene una estructura bastante sencilla que se puede entender y ajustar fácilmente para adaptarse a cualquier requisito de animación.
Ejemplo de estructura de fotogramas clave
|_+_|Supongamos que desea animar un botón rectangular verde convirtiéndolo en un botón redondo azul.
Dentro de los parámetros de la de sección anterior, deberá colocar todo el estilo necesario para que el elemento se vea como un botón rectangular verde, luego en el para sección, colocará todos los requisitos de estilo para transformar este botón en un botón redondo azul.
Si estás pensando, eso no suena demasiado a una animación. Bueno, eso se debe a que un componente clave de todo este proceso aún no se ha introducido: este componente es la propiedad de animación.
La propiedad de la animación
los propiedad de animación tiene un conjunto de diferentes subpropiedades; estos se utilizan en combinación con la estructura de fotogramas clave anterior para animar el elemento HTML deseado.
Sin embargo, solo necesita conocer cinco de estas subpropiedades y los valores que están asociados a ellas, para lograr la animación en sus proyectos. Estas propiedades se conocen como:
- Nombre de la animación
- Duración de la animación
- Función de temporización de animación
- Retraso de animación
- Recuento de iteraciones de animación
Usar animación en una página web
Usando el escenario anterior, el objetivo es crear un botón animado.
Ejemplo de animación de botón
|_+_|La sección de animación del código anterior contiene las cinco subpropiedades que se mencionaron anteriormente. Cada propiedad tiene una función muy distinta y juntas trabajan para animar cualquier elemento HTML al que están diseñadas para apuntar.
Relacionado: Cómo orientar los anuncios a parte de una página web mediante selectores CSS
La propiedad Animation-name
Esta propiedad es la propiedad más importante de la lista. Sin el propiedad animation-name , no tendrías ningún identificador para pasar al elemento de fotogramas clave , inutilizando todo el código dentro de sus parámetros.
Si olvidó incluir una o dos de las otras subpropiedades, es posible que aún tenga una animación bastante decente. Sin embargo, si olvidó el propiedad animation-name no tendrías animación.
La propiedad de duración de la animación
Esta propiedad se usa para definir la cantidad de tiempo que debe tomar un elemento animado al pasar de un estado al siguiente.
En el ejemplo anterior, el propiedad de duración de la animación está configurado en 5 segundos (5 s), por lo que el botón rectangular verde tendrá un total de 5 segundos antes de que se convierta completamente en un botón redondo azul.
La propiedad Animation-delay
Esta propiedad es importante por una razón; algunas páginas web pueden tardar unos segundos en cargarse por completo (debido a varios factores diferentes). Entonces el propiedad animation-delay evita que la animación se inicie inmediatamente en caso de que la página web tarde un poco en cargarse.
En el ejemplo anterior, el propiedad animation-delay se establece en 4 s, lo que significa que la animación no comenzará hasta 4 segundos después de que se visite la página web (lo que le da a la página web el tiempo suficiente para cargar antes de que comience la animación).
La propiedad Animation-iteration-count
Esta propiedad indica cuántas veces el elemento animado debe pasar de un estado al siguiente. los propiedad animation-iteration-count toma valores que son palabras y números. El valor numérico puede ser cualquier cosa desde 1 en adelante, mientras que el valor de la palabra suele ser infinito .
En el ejemplo anterior, el valor de recuento de iteraciones de animación se establece en infinito , lo que significa que mientras la página web esté activa, la propiedad del botón se animará de un estado al siguiente, continuamente.
La propiedad Animation-timing-function
Esta propiedad dicta el movimiento del elemento animado a medida que pasa de un estado al siguiente. los propiedad animation-timing-function normalmente se le asigna uno de los tres valores de facilidad.
- Facilidad en
- Facilitarse
- Facilidad de entrada y salida
los valor de facilidad de entrada y salida se usa arriba; esto cambia lentamente la animación de un estado a otro. Si el objetivo es crear una transición lenta cuando el botón se está transformando de un rectángulo verde a un círculo azul, usaría el valor de facilidad de entrada . Si solo quisiera la transición lenta en la dirección opuesta, usaría la valor de salida .
Reducir nuestro código
En la mayoría de los casos, la reducción de la duración de un programa se considera un enfoque práctico. Esto se debe principalmente a que menos líneas de código reducen la probabilidad de que los errores pasen desapercibidos en sus programas.
El código anterior se puede reducir en cuatro líneas. Esto se puede lograr simplemente usando la propiedad de animación sin identificar explícitamente cada una de sus subpropiedades.
Reducir el código para el ejemplo de animación de botones
|_+_|En el código anterior, se usa una línea de código para lograr el mismo resultado que antes tomaba cinco líneas de código; así es como producir código más limpio .
Ahora puede animar sus páginas web
Ahora tiene las habilidades necesarias para animar cualquier elemento HTML en una página web. También debe comprender cómo la propiedad de animación y el elemento de fotogramas clave funcionan juntos para hacer posible la animación CSS.
La propiedad de animación con su lista de subpropiedades es sin duda interesante. Aún así, existe un amplio espectro de otras propiedades CSS que pueden resultarle útiles.
Crédito de la imagen: Josh Riemer / Unsplash
Cuota Cuota Pío Correo electrónico La hoja de trucos de propiedades esenciales de CSS3Domine la sintaxis CSS esencial con nuestra hoja de trucos de propiedades CSS3.
Leer siguiente Temas relacionados- Programación
- Desarrollo web
- CSS
Kadeisha Kean es desarrolladora de software Full-Stack y redactora técnica / tecnológica. Tiene la habilidad distintiva de simplificar algunos de los conceptos tecnológicos más complejos; produciendo material que puede ser fácilmente entendido por cualquier novato en tecnología. Le apasiona escribir, desarrollar software interesante y viajar por el mundo (a través de documentales).
Más de Kadeisha KeanSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse