CSS avanzado

CSS avanzado

transfomtransition @keyframes

01

Transform

Las transformaciones CSS nos permiten rotar, torcer, escalar o desplazar los elementos de nuestra página web.

Las dos propiedades que nos sirven para definir las transformaciones son transform y transform-origin.

• transform-origin

• transform

La posición de origen que se utilizará para la transformación es por defecto el lado superior izquierdo del elemento.

La posición de origen para realizar la transformación es el eje central del elemento.

transform: function();

transform-origin: valores;

transform: rotate(45deg); transform-origin: 50% 50%;

Tipos de transformaciones

Scale: modifica el tamaño de los elementos.

scale(x,y) Redimensiona un elemento 2D scaleX(x) Redimensiona un elemento solo a lo largo de su eje horizontal ( x ) scaleY(y) Redimensiona un elemento solo a lo largo de su eje vertical ( y )

Translate: cambia la posición del elemento. Izquierda, derecha, arriba o abajo.

translate(x,y) Traslada o mueve un elemento a lo largo de los ejes horizontal ( x ) y vertical ( y ) translateX(x) Traslada o mueve un elemento solo a lo largo del eje horizontal ( x ) translateY(y) Traslada o mueve un elemento solo a lo largo del eje vertical ( y )

Rotate: gira o rota los elementos en grados.

rotate(a) Define una rotation 2D, donde a es el ángulo ( en grados hexagesimales ), donde a es el ángulo de rotación.

Skew: distorsiona los elementos.

skew(ax,ay) Sesga un elemento a lo largo de sus dos ejes skewX(ax) Sesga un elemento a lo largo del eje X (horizontal), donde ax es el ángulo de deformación. skewY(ay) Sesga un elemento a lo largo del eje X (vertical), donde ay es el ángulo de deformación.

Matrix: mueve o transforma los elementos con precisión de píxel.

matrix(n,n,n,n,n,n) Define una transformación 2D, utilizando una matriz de 6 valores. matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Define una transformación 3D, utilizando una matriz de 4x4 = 16 valores.

02

Transition

Las transiciones en CSS nos permiten aplicar un cambio de estilo gradual a los elementos del documento HTML. Además, nos ofrecen la ventaja de poder especificar el tiempo para que se produzca la transformación entre estilos, de esta forma podríamos utilizarlas para dar un efecto de animación.Los pasos son:

1. Definimos las propiedades a modificartanto tanto en el selector inactivo como en el que tiene el cambio de estado.
2. En el selector que tiene el comienzo de la transición añadimos la propiedad transition

Todos los parámetros para aplicar las transiciones se pueden establecer en una sola línea y también mediante propiedades por separado. Veamos cómo se implementa en una sola línea.

transition: [propiedad a modificar] [Duración] [Tipo de animación] [Retardo];

.caja1{ background-color: #C0392B; transition: background-color 1s linear; } .caja1:hover{ background-color: #3F51B5; }

Propiedades básicas

transition-property: la proiedad a modificar

algunas de las propiedades que podemos modificar utilizando transiciones son: all | background-color | border | border-radius | color | top | bottom | left | right | box-shadow | width | height | line-height | margin | opacity | word-spacing | letter-spacing | fill | padding | stroke | text-shadow | vertical-align | visibility | z-index,

transition-duration: decide cuanto tiempo durará la transición entre el valor inicial y el valor final de la propiedad transicionada

por defecto, el valor es de 0s (0 segundos) o 0ms (0 milisegundos). Esto quiere decir que no se producirá ninguna animación.

transition-timing-function: La función de temporizador que especifica la curva de velocidad del efecto de transición

es un parámetro opcional y puede tomar los siguientes valores: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)Si no especificada, la función de temporizador toma por defecto el valor linear.

• linear: el efecto de transición pasa con la misma velocidad de principio a fin (equivalente a: cubic-bezier(0,0,1,1))
• ease: la transición es lenta al inicio, después rápida, después lenta de nuevo (equivalente a: cubic-bezier(0.25,0.1,0.25,1))
• ease-in: la transición es lenta al inicio (equivalente a: cubic-bezier(0.42,0,1,1))
• ease-out: la transición es lenta al final(equivalente a: cubic-bezier(0,0,0.58,1))
• ease-in-out: la transición es lenta al inicio y al final (equivalente a: cubic-bezier(0.42,0,1,1))

transition-delay: especifica el número de segundos ( s ) o milisegundos ( ms ) antes de empezar la transición.

03

@keyframes

Esta regla se utiliza para definir una secuencia de fotogramas de una animación CSS.Los pasos son:

1. Definimos la animación
2. Asignamos la animación

Definimos la animación

Todas las animaciones van desde 0% a 100%. Eso quiere decir que podemos determinar tanto el inicio, el final, como cualquier otro punto intermedio entre estos dos valores.

@keyframes nombreAnimacion { /*las reglas para nombreAnimacion */ }

@keyframes cambiarColor { 0% { background-color: #f00;} 100% { background-color: #e00;} }

@keyframes cambiarColor { from { background-color: #f00;} to { background-color: #e00;} }

Asignamos la animación

Para que sea visible la animación debe ser asignada a un selector.

.selector {animation: [animation-name] [animation-duration] [animation-iteration-count];}

animation-name

Para definir cuál es la animación que queremos utilizar.

.animado {animation: cambiarColor 3s infinite;}@keyframes cambiarColor { 0%, 50% , 100% { background-color: #f00;} 25%, 75% { background-color: #e00;} }

animation-duration

Para establecer el tiempo que debe durar la animación. El valor puede ser en segundos (s) o milisegundos (ms).

animation-iteration-count

Para definir la cantidad de veces que se repetirá la animación. Puede ser un número o la palabra infinite para que se reproduzca infinitamente.

Pasa pensar

Veamos un ejemplo

Como se hace?: El terminado:

https://www.youtube.com/watch?v=g6RfpDiHDvo

https://codepen.io/baumannzone/pen/LYbjryy