#01 - Transiciones

La propiedad CSS transition proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que se puede personalizar.

La propiedad transition es una propiedad abreviada que se utiliza para representar hasta cuatro propiedades relacionadas con la transición. Al especificar la transición en el elemento en sí, define la transición para que ocurra en ambas direcciones.

.ejemplo { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; }

Algunas propiedades no se pueden cambiar porque no son propiedades animables. [consultar W3C] [Can I use]

Para compatibilidad en todos los navegadores compatibles, se requieren prefijos de proveedor, con la sintaxis estándar declarada en último lugar:


.ejemplo {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

Esta tarea consiste en crear distintos ejercicios utilizando la propiedad abreviada css transition con sus dintintas propiedades y valores para cada una de ellas.

Objetivos

Estudiar y utilizar las propiedades de transition.
Crear distintos efectos variando sus propiedadess.
Utilizar la pseudoclase :hover para obtener el resultado.
Teoría y Ejemplos: Movimientos -> transiciones
Tecnologías para desarrolladores: Transiciones CSS - MDN

Utilizando como base la "template" base1_tareas y algunas imágenes libres o simuladas,
realiza los siguientes ejercicios:

Demo

Ejercicio 1

Ejercicio 2

Coloca dentro de las etiquetas de cabecera head la siguiente etiqueta:

Comprime, con 7zip, toda la carpeta de tu proyecto (tarea) y guárdala en tu tarjeta de memoria y en una nube (Drive o onDrive) con el nombre t16_transiciones.7z. Más tarde la enviarás al Aula Virtual y al VPS (Servidor Privado Virtual).

Etiquetas: 2ª Evaluación, CSS