Retraso de CSS
Ejemplo 1: Retraso de transición en un ancho de divisas Div utilizando el enfoque de etiqueta de estilo
En este ejemplo, utilizaremos la propiedad de retraso para hacer la transición de un elemento Div Ancho utilizando el enfoque de etiqueta de estilo. La propiedad de retraso de transición se aplicará en un DIV, y la transición ocurrirá en el ancho del DIV.
En este script, comenzaremos con el encabezado del archivo. Abriremos la etiqueta de estilo y crearemos una clase de estilo para el elemento div en esta etiqueta. En esta clase de estilo, agregaremos altura y ancho para el tamaño predeterminado del DIV. Después de esto, agregaremos la propiedad de transición en el ancho utilizándola como palabra clave. Luego, definiremos la duración de la transición en segundos. Al final de esta etiqueta, también definiremos la restricción de retraso de transición dándole un valor en segundos.
Después de esto, heredaremos esta clase para una función de desplazamiento en la que agregaremos la propiedad de ancho, que se incrementaría desde la configuración anterior y se activaremos cuando se rondía el DIV. Este cambio en el ancho será administrado por las propiedades de transición, incluida la propiedad de retraso de transición, que decidirá la brecha de tiempo para esta transición. Luego, terminaremos las propiedades de estilo y cerraremos la etiqueta de estilo para avanzar hacia el cuerpo del archivo. Le daremos a la página un encabezado en la etiqueta del cuerpo usando el H1 etiqueta. Después de esto, agregaremos un elemento DIV mediante una etiqueta Div donde no agregaremos ningún valor porque todo está definido en la etiqueta de estilo en el encabezado del archivo.
El primer fragmento muestra que el DIV está en su etapa predeterminada. Después de flotar en el DIV, la transición ocurrirá de acuerdo con las propiedades definidas en la etiqueta de estilo que se puede observar en el segundo fragmento.
Ejemplo 2: Retraso de transición en un enfoque de etiqueta de estilo Div Utilizando
En este ejemplo, utilizaremos el atributo de retraso para hacer la transición de un elemento divir.
Comenzaremos con el encabezado del archivo en este script. Abriremos la etiqueta de estilo en esta etiqueta y construiremos una clase de estilo para el elemento div. En esta clase de estilo, agregaremos altura y ancho para el tamaño predeterminado del DIV. Después de eso, usaremos una palabra clave para agregar el atributo de transición a la altura de un DIV. Luego, después de esta etiqueta, definiremos el tiempo de transición en segundos y la restricción de retraso de transición al proporcionarle un valor en segundos. Heredaremos esta clase para una función de desplazamiento y agregaremos la propiedad de altura, que se incrementará desde el valor anterior y se activará cuando el DIV ha pasado. Este cambio de altura será administrado por las propiedades de transición, que incluyen la propiedad de retraso de transición y determina la brecha de tiempo para esta transición.
Después de eso, agregaremos un elemento Div con una etiqueta div en el cuerpo. El archivo se cerrará cerrando todas las etiquetas.
La primera salida muestra que el DIV está en su estado predeterminado. Cuando pasamos sobre ella, la transición ocurre de acuerdo con las propiedades proporcionadas en la etiqueta de estilo, que se muestra en la segunda salida.
Ejemplo 3: Retraso de animación en el lado superior de un DIV utilizando el enfoque de etiqueta de estilo
En este ejemplo, utilizaremos la propiedad de retraso mientras emplea el enfoque de etiqueta de estilo para animar un elemento div desde el lado superior.
En este script, comenzaremos con el encabezado del archivo. Abriremos la etiqueta de estilo y crearemos una clase de estilo para el elemento div en esta etiqueta. Agregaremos altura y ancho para el tamaño predeterminado de div en esta clase de estilo. Después de eso, usaremos una palabra clave para agregar la propiedad de animación de Div. Luego, al final de esta etiqueta, proporcionaremos el tiempo de animación en segundos y la restricción del retraso de transición al proporcionar un valor en segundos. Haremos una nueva clase para la animación y agregaremos una propiedad de tamaño para el lado superior del DIV que se incrementará del valor anterior y activo después del período de retraso.
Las propiedades de transición controlarán la animación, incluida la propiedad de animación-retraso, que controla la brecha de tiempo antes de que comience la animación. Luego se eliminarán los atributos de estilo, y la etiqueta de estilo se cerrará, lo que nos permite ir al cuerpo del archivo. Agregaremos un elemento Div con una etiqueta DIV pero sin valor porque todo se define en la etiqueta de estilo del archivo.
La primera salida muestra que el DIV está en su posición predeterminada. Cuando termina el tiempo de animación, la animación ocurre de acuerdo con las propiedades proporcionadas en la etiqueta de estilo, como se ve en la segunda salida.
Ejemplo 4: Retraso de animación en el lado izquierdo de un Div utilizando el enfoque de etiqueta de estilo
En este ejemplo, utilizaremos el atributo de retraso junto con el método de etiqueta de estilo para animar un elemento div desde el lado izquierdo.
En este script, comenzaremos con el encabezado del archivo. Abriremos la etiqueta de estilo y crearemos una clase de estilo para el elemento div en esta etiqueta. Agregaremos altura y ancho para el tamaño predeterminado de div en esta clase de estilo. Después de eso, usaremos una palabra clave para agregar la propiedad de animación de Div. Luego, al final de esta etiqueta, proporcionaremos el tiempo de animación en segundos y la restricción del retraso de transición al proporcionar un valor en segundos.
Haremos una nueva clase para la animación y agregaremos una propiedad de tamaño para el lado superior del DIV que se incrementará del valor anterior y activo después del período de retraso. Las propiedades de transición controlarán la animación, incluida la propiedad de animación-retraso, que controla la brecha de tiempo antes de que comience la animación. Luego se eliminarán los atributos de estilo, y la etiqueta de estilo se cerrará, lo que nos permite ir al cuerpo del archivo. Agregaremos un elemento Div con una etiqueta DIV pero sin valor porque todo se define en la etiqueta de estilo del archivo.
El DIV está en su posición predeterminada, como se muestra en el primer resultado. Después de que expira el temporizador de animación, la animación ocurre de acuerdo con los parámetros especificados en la etiqueta de estilo, como se ve en la segunda salida.
Conclusión
En este artículo, hemos discutido el uso de la propiedad de retraso del CSS en el lenguaje de marcado de hipertexto. La propiedad de retraso se usa comúnmente con la propiedad de transición y animación de CSS. Esta propiedad se utiliza como una subproperización para la propiedad de animación y transición, que ayuda a definir el retraso de la propiedad individual. Implementamos estas propiedades con la propiedad de retraso como una subproperiedad en el entorno de bloc de notas ++.