Otra buena forma de agregar efectos visuales con CSS es usar transiciones. Nos ayudan a transformar propiedades de CSS de un valor a otro de manera suave, con una duración determinada entre ambos estados.

Las dos propiedades clave para lograrlo son:

• transition-property: define a qué propiedad queremos aplicar la transición, por ejemplo width, height o border.

La propiedad transition-property permite combinar más de una propiedad:

transition-property: width, height

• transition-duration: define el tiempo que toma el cambio entre ellas.

transition-duration: 0.6s, 

En mi ejemplo muestro dos cajas: una tiene transiciones y cambia sus propiedades suavemente al pasar el cursor (hover), mientras que la otra cambia de golpe.

Ejemplo en JSFiddle

También podemos agregar dos parámetros opcionales: transition-delay, que define el tiempo de espera antes de comenzar, y transition-timing-function, que define la velocidad desde el inicio hasta el final (por ejemplo, hacer que la animación espere 2 segundos antes de iniciar).

Por defecto su valor es ease, pero puedes configurar otros tipos como ease-in (que tiene un inicio lento) o linear (que mantiene la misma velocidad de principio a fin).

Ejemplo en JSFiddle

transform

La propiedad transform nos ayuda a cambiar la posición, el tamaño y la forma de los elementos, y podemos combinarla con transition para lograr efectos muy llamativos.

transform acepta diferentes funciones como translate, rotate o scale.

Al igual que con otras propiedades de CSS como width y height, podemos aplicar transiciones sobre transform para lograr cambios fluidos:

Mi primer ejemplo utiliza transform con rotate: al pasar el cursor sobre el elemento (hover), este rotará 65 grados.

main:hover {
	transform: rotate(65deg);
	border: 8px solid red;
	background-color: yellow;
}

Ejemplo en JSFiddle

transform también acepta otras opciones:

• translate(x, y): mueve elementos usando las coordenadas X e Y.
• rotate: rota el elemento indicando grados (deg), por ejemplo rotateY(180deg) o rotateX(180deg).
• scale: escala el tamaño de un elemento entre X e Y.

Y podemos usarlas todas juntas en una sola regla:

transform: scale(4) translate(50px, 50px) rotate(90deg);

Ejemplo en JSFiddle

Si quieres leer más sobre transform, puedes consultar la lista completa en MDN.

¡Eso es todo!

Espero que este artículo te sirva de ayuda para comenzar con transiciones y transform en CSS. Si te gustó este post, ¡compártelo!