Aunque las transiciones no son comportamientos las hemos incluimos en este tema porque tienen cierto parecido.
Las transiciones permiten pasar propiedades CSS de un estado inicial a otro estado final de forma continua. Por ejemplo, si partimos de una imagen de un ancho de 540 px. y pasamos a un ancho de 320 px. al aplicarle una transición el cambio no será instantáneo, sino de forma gradual durante un tiempo que podemos especificar, por ejemplo un segundo. De forma que al realizar esta transición parecerá que el elemento se mueve.
Con transiciones se pueden lograr vistosos efectos de animaciones.
Por ejemplo, si haces clic sobre la siguiente imagen y mantienes el botón apretado un tiempo, verás como la imagen se hace más pequeña. Al soltar el botón vuelve a su tamaño inicial. En la transición hemos definido que el ancho y el alto de la imagen disminuyan gradualmente.
En navegadores antiguos (Intenet Explorer ) no funcionan las transiciones.
Para manejar las transiciones vamos al menú Ventana → Transiciones CSS y se abrirá una ventana similar a esta.
Para crear una transición nueva pulsaremos el botón +, en caso de querer modificar una pulsamos el botón editar 
y aparecerá un cuadro de diálogo similar al siguiente.
Para crear una transición tenemos que definir dos cosas fundamentales, sobre qué elemento la aplicamos y qué propiedad vamos a usar. En el ejemplo del diplodocus el elemento es la imagen del diplodocus y las propiedades son la anchura y altura de la imagen. En el caso representado en la figura, el elemento es un encabezado con un identificador llamado #h2_transición y las propiedades el font-size y el color.
El elemento sobre el que se aplican las transiciones se define en Regla de destino y puede ser genérico, por ejemplo <h2>, o específico, una regla o clase. En el primer caso la transición se aplicaría a todos los encabezados <h2> mientras que en el segundo caso sólo a los encabezados con un ID asignado previamente, en el caso que se muestra en la imagen #h2_transición. Si pasas el puntero del ratón sobre el título de este punto "Transiciones" verás la transición que hemos creado para este encabezado <h2> concreto.
La propiedad sobre la que se realiza la transición se especifica en el cuadro Propiedad, al pulsar en el botón + se abre un desplegable con las propiedades susceptibles de ser animadas. En este caso hemos animado dos propiedades, font-size y color.
Hay combinaciones que no tienen sentido, por ejemplo si en Regla de destino hemos indicado una imagen, no es lógico asignarle la propiedad font-size, aunque Dreamweaver no realiza validaciones, la transición no haría nada.
A la derecha de la Propiedad aparece el campo para especificar el Valor final, según el tipo de propiedad será el tipo de dato, por ejemplo, si la propiedad es Color, aparecerá un desplegable para elegirlo, si la propiedad es Background-image aparecerá un icono para seleccionar el archivo de imagen. La transición irá desde el valor inicial definido en la hoja de estilo hasta el valor final que pongamos aquí. Por ejemplo, en nuestro caso el color inicial será el marrón, definido para las etiquetas <h2> y el color final el verde #090.
Transición con, en este desplegable aparece una lista con las situaciones en las que se arrancará la transición. Los más usados son Hover (cuando el cursor esté encima) y Active ( al hacer clic), también Cheked, Focus, Enable, ...
Los tres campos siguientes indican cómo se realiza la transición en cuanto a la Duración, el tiempo en arrancar o Demora y la Función de temporización que indica si el efecto es lineal o más rapido al inicio, o al final. Si en Duración ponemos un cero no habrá transición gradual, será brusca.
Estos tres campos pueden ser iguales para todas las propiedades o diferentes para cada propiedad según elijamos el desplegable Usar la misma transición para todas las propiedades o no.
Puedes consultar los valores concretos para cada propiedad en la web del WC3.
Si colocas el cursor sobre "Más datos" verás una transición. En este video tienes explicado cómo realizarla.
 Ejercicio propuesto de la Unidad 16 |
 Prueba evaluativa de la Unidad 16 |
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.