CSS Transición múltiples propiedades
Ejemplo 1
Inicie este código creando primero el archivo HTML. Estamos abriendo el nuevo archivo y luego seleccionando el HTML como el idioma en el código Visual Studio; debemos poner el "!"Dentro del archivo que hemos creado aquí. Todas las etiquetas básicas del HTML aparecen en este archivo. Solo necesitamos escribir el cuerpo del HTML y el enlace del archivo CSS dentro del "Cabeza."Aquí, en el cuerpo, primero creamos un encabezado y luego un párrafo. Después de este párrafo, estamos creando un div vacío aquí. También usaremos este código HTML en nuestros próximos ejemplos. Ahora, avanzaremos hacia el archivo CSS para una mayor codificación. Aplicaremos las propiedades de transición en este DIV en el archivo CSS.
Primero, establecemos el "div", y su "ancho" es "100px" y "100px" para la "altura."Luego establece su" fondo "como" púrpura."El" radio fronterizo "de este div es" 50%", por lo que aparecerá como un círculo. Después de todas estas propiedades, vamos a aplicar la propiedad de "transición" y poner "ancho" y "2s" aquí. Aplica el efecto de transición en el ancho del div y anima para 2 segundos. Después de esto, usamos el "desplazamiento" con el "Div", por lo que cuando paseamos por este Div, cambiará su ancho a "300px" como hemos seleccionado "300px" como su "ancho."
La salida de este código muestra cómo cambia la propiedad de transición en el ancho del elemento DIV. Puede ver en este video dado que su ancho aumenta cuando pasamos el mouse sobre este círculo div. Cuando el mouse no supere este elemento, volverá a la posición original.
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilice las teclas de flecha hacia arriba/abajo para aumentar o disminuir el volumen.Ejemplo # 2
Aquí, vamos a aplicar la propiedad de transición al ancho y altura. El "ancho" del div es "120px", y la "altura" también es la misma "120px". El "fondo" del div es de color "naranja", y su "radio de borde" es "30%" en este ejemplo. Estamos utilizando la propiedad de "transición" aquí, que cambia su "ancho" con una duración de tiempo de "2s" y cambia su "altura" con una duración de tiempo de "4s". Todas estas transiciones se aplican cuando activamos el mouse sobre este elemento div. También usamos el "Div.Hover ", en el que establecemos el" ancho "y la" altura "del elemento divs después de flotar. Establecimos el "320px" para el "ancho" cuando lo pasamos sobre él y el
"Altura" de 320px ".
En este video dado, puede ver la salida de este ejemplo. Puede ver que cuando nos desplazamos en este elemento div, cambia su ancho y su altura porque establecemos el ancho y la altura en la propiedad de transición CSS.
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilice las teclas de flecha hacia arriba/abajo para aumentar o disminuir el volumen.Ejemplo # 3
Aquí, vamos a usar todas las propiedades de transición por separado en el DIV. Establecemos primero el "ancho" y la "altura", y ambos están en "130px". Entonces estamos eligiendo "rosa" como el "fondo" del div. Su "radio fronterizo" es "20%". Ahora tenemos las propiedades de transición aquí. Primero, establecemos la "propiedad de transición" y damos el nombre en el que se emplea la transición. Entonces, aquí establecemos el "ancho" en esta propiedad. Vamos a establecer el tiempo en propiedades de transición separadas. Para establecer el tiempo de transición, utilizamos la propiedad de "duración de transición" y damos el tiempo aquí en esta propiedad. Establecimos "2s" para esta "propiedad de duración de tiempo."
Después de esto, tenemos la propiedad de "función de tiempo de transición". Esta propiedad se usa aquí para especificar la velocidad de la transición. Aquí, lo establecemos como "lineal", lo que significa que la velocidad del efecto de transición será la misma desde el principio hasta el final. Luego, también aplicamos cierto retraso a esta transición mediante el uso de la propiedad "Transition-Delay". Establecemos este valor de la propiedad como "1s". Producirá un retraso de "1 segundos" para el efecto de transición. Usamos todas las propiedades de transición aquí en este código por separado. Después de todo esto, establecemos el "ancho" del Div cuando nos desplazamos. Después de flotar, cambia su ancho a "350px".
La salida se muestra aquí en el video. Puede ver que cuando pasamos el mouse sobre este div, se requiere un retraso de 1 segundo y luego aplica la transición en su ancho, y el ancho cambia de manera lineal, lo que significa a una velocidad constante de principio a fin.
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilice las teclas de flecha hacia arriba/abajo para aumentar o disminuir el volumen.Ejemplo # 4
En este ejemplo, estamos utilizando la propiedad abreviada de todas las propiedades que hemos utilizado en nuestro ejemplo 3 anterior en este tutorial. El "ancho" y la "altura" se establecen aquí como "150px" para cada uno, y el "fondo" es "rosa."Luego estamos utilizando la propiedad abreviada de la transición en la que especificamos la" propiedad de transición ", la" duración de la transición ", la" función de tiempo de transición y el "retraso de la transición" en una propiedad de "transición". Aquí, el "ancho" especifica que la transición se aplica en el "ancho" del DIV, y la duración de la transición es "2s" y en la función de tiempo "lineal" de la transición y un retraso de 1 segundo en la transición. Todas estas propiedades se definen aquí en una propiedad. Por lo tanto, también se llama la propiedad abreviada de la transición. También establecemos el "ancho" de este div después de flotar sobre el ratón.
El video de salida muestra que cuando movemos el mouse sobre esto, se requiere un retraso de 1 segundo antes de aplicar la transición a su ancho, que cambia linealmente de principio a fin.
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilice las teclas de flecha hacia arriba/abajo para aumentar o disminuir el volumen.Ejemplo # 5
Estamos creando múltiples elementos DIV aquí con diferentes nombres y aplicaremos diferentes propiedades de función de tiempo de transición a todos estos. Creamos cinco elementos div diferentes aquí en este código.
El "ancho" y la "altura" de todos los elementos div son "100px" para cada uno. Aplicamos la "transición" en el "ancho" en la duración del tiempo de "2s". También alineamos el texto que se escribe dentro del Div en "Center" utilizando la propiedad "Alineación de texto" y configurando "Bold" para este "peso de fuentes."Luego, vamos a mencionar el primer DIV con la ayuda del nombre del DIV y usar la propiedad de" función de tiempo de transición "para este DIV, y establecer" lineal "para este DIV. Entonces, muestra la misma velocidad de principio a fin. El "fondo" de "Div1" es "rojo."
Para el segundo div, "Div2", estamos usando "facilidad" para la "función de transición-duración."Esta" facilidad "comenzará la transición lentamente, luego rápidamente y termina lentamente. El "fondo" de "Div2" es "verde."Para el tercer div," Div3 ", usamos un fondo" azul ", y estamos estableciendo" facilidad "como el valor del" función de transición-duración."La" facilidad "se usa para hacer que el efecto de transición comience lentamente. El Cuarto Div tiene un "fondo amarillo" y "Facilifique" para esta propiedad. La transición de "facilidad" termina lentamente. El último div utiliza "facilitar" en "función de transición-duración" y comenzará y terminará lentamente. Además, el "fondo" del último div es "Maroon."
En el video, tenemos cinco elementos DIV diferentes con diferentes "función de transición-tiempo" y puede notar en este video que el momento de la transición de todos los elementos DIV es diferente.
Video Playerhttps: // Linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Utilice las teclas de flecha hacia arriba/abajo para aumentar o disminuir el volumen.Conclusión
Hemos proporcionado este tutorial que explica el concepto de las propiedades de transición en CSS. Hemos cubierto este tema en detalle en este tutorial. Hemos explicado la propiedad de transición, la duración de la transición, la función de transición-función y las propiedades de retraso de transición por separado y la propiedad en taquigrafía de estas propiedades aquí. Hemos superado cinco ejemplos diferentes y proporcionamos las salidas de video para que verifique cómo funciona esta propiedad. Espero que entiendas las múltiples propiedades de transición en CSS y lo hagas tú mismo.