Movimientos CSS

Con CSS3, y sin una sola línea JavaScript, puedes inclinar, escalar, mover e incluso voltear los elementos de una página Web, y todos estos movimientos los puedes hacer de forma tan suave como quieras, realzando de este modo dichos efectos. CSS3 te permite el control sobre muchos aspectos de la apariencia de un elemento. Con la combinación de varios de ellos podemos crear efectos muy interesantes 2D y 3D.

En todo movimiento CSS interviene alguno de estos tres conceptos:


1
2
3
4
5
6

Transformaciones
transform

Las transformaciones es una de las características más interesantes que se introducen en CSS3 para convertir el lenguaje de hojas de estilo en un sistema capaz de realizar todo tipo de efectos visuales, incluido 2D y 3D.


Transiciones
transition

Otro de los aspectos más atrayentes en la web interactiva son 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 sin pasos intermedios. 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 aumentarán las posibilidades de nuestros diseños. Las transiciones se basan en un principio muy básico, conseguir un efecto suavizado entre un estado inicial y un estado final.


Animaciones
animation

El concepto de animacines CSS3 amplia el concepto de transiciones convirtiéndolo en algo mucho más flexible y potente. Las transiciones son la manera de suavizar un cambio de un estado inicial a un estado final. La idea de las animaciones CSS es permitir más estados intermedios, pudiendo realizar cambios desde un estado inicial, a un estado siguiente, y luego a otro estado posterior, y así sucesivamente. Para crear animaciones debemos tener dos conceptos claros: la regla @keyframes, que incluye los fotogramas de la animación; y las propiedades CSS de las animaciones, que definen el comportamiento de la misma.