Animaciones con CSS

Transformaciones

Mediante esta propiedad de CSS aplicamos un cambio repentino sobre alguna propiedad del modelo de caja del elemento a transformar. Normalemente definimos el cambio en la pseudo-clase :hover del elemento, o de un elemento parent.

Algunos tipos de transformación:

Desplazamiento

También existen las propiedades translateX y translateY para realizar el desplazamiento 2D sobre uno de los dos ejes.

Escalado

También existen las propiedades scaleX y scaleY para realizar el escalado sobre uno de los dos ejes.

Sesgado

También existen las propiedades skewX y skewY para realizar el sesgado 2D sobre uno de los dos ejes.

Rotación

Rotaciones 3D

Varias transformaciones a la vez

Propiedad transform-origin

Esta propiedad permite definir un centro desde el cual aplicar la transformación al objeto. Por defecto, si no se especifica otro origen, las transformaciones se realizan desde el centro del propio objeto a transformar. Pero se puede definir una posición diferente sobre la base de un eje de coordenadas del objeto.

Este eje puede tener 3 coordenadas X, Y, Z, si la transformación a realizar usa los 3 ejes. En caso de transformaciones de dos dimensiones, usa los ejes X e Y.

Para definir los valores de cada eje se puede usar una unidad numérica (px, %, rem...) o se puede usar una palabra clave (top, right, bottom, left, center). Los valores para cada eje se definen en la misma propiedad separados por espacios. Y usa las mismas reglas que la propiedad background-position: El primer valor se refiere al eje X, el segundo al eje Y, y en caso de usar el eje Z su valor será el tercero de la propiedad.

Se pueden combinar diferentes unidades para cada eje, y también unidades con palabras clave. Por ejemplo: transform-origin: 20% bottom; transform-origin: 20% 80px; transform-origin: left bottom;

Si únicamente ponemos un valor numérico se entiende que ese valor se aplica a los dos ejes a la vez, o a los tres si fuera una transformación 3D.

El eje Z solo admite valores numéricos, no podemos usar palabras clave en él.

Selecciona un centro de transformación center 40% 90px center right bottom right top

Transiciones en CSS

Las transiciones también suponen cambios en posición, tamaño y forma de los elementos. Pero en este caso los cambios son graduales, de manera que se genera un efecto de animación sobre la propiedad modificada.

A la hora de definir una transición se tiene en cuenta 3 factores: La propiedad que se anima, el tiempo que dura esta animación, y el estilo de animación que queremos crear. Además se puede definir un cuarto elemento que especifica el tiempo de retraso para comenzar la transición.

La propiedad transition del elemento debe ser definida en el CSS inicial del elemento, especificando qué, cómo y cuanto se anima en él. Y en el estado hover solamente definiremos el valor final de la propiedad que estamos animando.
Nota: Las propiedades que vayamos a animar tienen que tener un valor inicial definido en el CSS del elemento. Si sólo definimos su valor final no se produce la animación. Además para animar propiedades que implican un cambio de posición, también es necesario haber definido el position del elemento.

Transición básica

	#uno {
		transition: width 1s;
	}
	.disp:hover + #uno {
		width: 500px;
	}

Transición desplazamiento

#dos {
	transition: left 1s;
	left: 0;
	margin-left: 0;	
}
.disp:hover + #dos {
	left: 700px;
}
	

Transición con aceleración

#tres {
	transition: left 3s
	cubic-bezier(.88,-0.67,0,1.77);
	left: 0;
	margin-left: 0;	
}
.disp:hover + #tres {
	left: 700px;
}
	

Transición de varias propiedades

#cuatro {
	transition: left 3s ease-in,
	 width 1s ease-in-out;
	left: 0;
	margin-left: 0;	
}
.disp:hover + #cuatro {
	left: 700px;
	width: 500px;
}
	

Transición con transformación

#cinco {
	transition: transform 1s
	ease 1.5s, left 1.5s;
	left: 0;
	margin-left: 0;
}
.disp:hover + #cinco {
	transform: rotateY(560deg);
	left: 700px;
}
	

Transición de todas las propiedades

#seis {
	transition: all .5s;
}
.disp:hover +  #seis {
	width: 400px;
	height: 500px;
}
	

Ejemplos