En CSS3 se introduce uno de los aspectos más interesantes en la web interactiva: las transiciones. En versiones anteriores de CSS sólo se podían utilizar ciertas funcionalidades interactivas con pseudoclases como :hover o :focus. Sin embargo, dichas transiciones ocurrían de golpe, pasando de un estado a otro. Ahora, con las transiciones, tenemos a nuestra disposición una gran flexibilidad que nos permitirá dotar de atractivos y elegantes efectos de transición que multiplicarán por mil las posibilidades de nuestros diseños.
Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.
Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.
Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.
Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.
Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
Especifica el nombre de la regla @keyframes que describe los fotogramas de la animación.
Permite pausar y reanudar la secuencia de la animación
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).
Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.
La propiedad flex-direction establece el eje principal.
La propiedad justify-content define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.
La propiedad align-items define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.
La propiedad align-self define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por align-items.
CSS Grid layout contiente funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. Destaca por dividir una página en regiones principales, o definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.
La propiedad CSS grid-template-columns define el nombre de las líneas y las funciones de tamaño de línea de grid columns.
La propiedad CSS grid-gap es una propiedad abreviada shorthand para grid-row-gap y grid-column-gap que especifica los canales entre las filas y las columnas de la cuadrícula.
La propiedad CSS grid-auto-rows espeficica el tamaño automatico de las filas.
La propiedad CSS grid-row especifica en el contenedor usado el numero de fila que ocupa
La propiedad CSS grid-colum espeficica en el contenedor usado el numero de columna que ocupa