Hemos visto que las hojas de estilo en cascada son de
naturaleza muy dinámica. En un extremo, hay funciones tan simples como el
color del texto, y luego hay funciones como el desplazamiento con el que se
puede personalizar cómo funcionará el desplazamiento por separado para cada elemento. Otra
característica dinámica similar es el efecto de transición. Usando esta
propiedad de CSS, un desarrollador puede animar los objetos en la página para
hacer la transición a cualquier cosa requerida. Básicamente, la transición
es una propiedad que es la abreviatura de propiedad de transición, duración de
transición, función de temporización de transición, retraso de transición. Si
los agrupamos a todos juntos, puede haber una transición suave programada.
Sintaxis:
La propiedad de transición es una
propiedad abreviada.
transition: transition-property transition-duration
transition-timing-duration transition-delay
Ahora, estos valores que se pasan
como parámetros para la transición de propiedad abreviada también se pueden
usar como propiedades individuales y separadas donde los valores respectivos se
pueden pasar para lograr el efecto de transición requerido.
DEMOSTRACIÓN
En
el espacio de nombre del proyecto damos click derecho y seleccionamos Add à New Items
En
la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como
nombre del archivo “Transitions.html”, para luego presionar el botón Add.
Así
codificaremos en el elemento <HEAD></HEAD>
En el
cuerpo <BODY></BODY>
Y
procedemos a establecer la página web como inicio
Y verificamos página web:
Al
colocar el puntero del mouse en el primer recuadro
