Transiciones en CSS: transition-property y transition-duration

CSS

Transiciones en CSS

Las transiciones o la propiedad transition permiten cambiar  las propiedades CSS de un elemento a través del tiempo proporcionando animaciones sencillas. Por ejemplo, si el ratón pasa por encima de un hipervínculo y este cambia de color, se puede hacer el cambio de manera gradual. Para sacar un mayor partido a las transiciones, te recomiendo que le eches un ojo al post respecto  las transformaciones 2D.

La animación en web no es cosa nueva de CSS, ya podían realizar animaciones con JavaScript pero, con CSS requiere mucho menos poder de procesamiento en el lado del cliente aparentando fluidez. Esto es algo a tener en cuenta si queremos que smartphones limitados no tengan problemas a la hora de cargar una página.

Las transiciones de CSS son declaraciones junto con los estilos de un elemento. Cuando una propiedad cambia, el navegador aplica la transición. Es muy corriente que se aplique cuando un elemento cambia de estilo debido a un hover.

Cómo crear una transición simple

Para aplicar una transición hay que seguir unos sencillos pasos

  • Declarar el estado original del elemento en la declaración del estilo de origen
  • Declarar el estado final del elemento transicionado. Por ejemplo, en un estado hover.
  • En la declaración de estilo de origen, incluir las funciones de transición.

La propiedad transition-property

Una transición puede aplicarse a una propiedad en concreto. La propiedad transition-property permite aplicar la transición a las siguientes propiedades (pueden haber más disponibles)

  • background-color y background-position
  • border-color, border-spacing, y border-width
  • bottom, top, left, y right
  • clip
  • color
  • crop
  • font-size y font-weight
  • height y width
  • letter-spacing
  • line-height
  • margin
  • max-height, max-width, min-height, y min-width
  • opacity
  • outline-color, outline-offset, y outline-width
  • padding
  • text-indent
  • text-shadow
  • vertical-align
  • visibility
  • word-spacing
  • z-index
  • transform

Voy poner un ejemplo con transformaciones. La animación consistirá en un div que encojerá la mitad al pasarle el ratón por encima. Empezamos indicando las reglas CSS que tendrá el div y que la propiedad a la que aplicará la transición es a un transform

CSS
1
2
3
4
5
6
7
8
9
10
#encojer{
width:500px;
height:200px;
background-color:#0F6;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}

Para asegurar una compatibilidad completa entre distintos navegadores, se emplean los diferentes prefijos de navegadores. Aunque esta propiedad por sí sola no vale de mucho ya que es preciso indicar una duración. También hay que establecer la reducción del div cuando se pase por encima.

CSS
1
2
3
#encojer:hover{
   transform:scale(0.5);
}

Con scale con 0.5 indicamos que se reduzca su tamaño en 0,5 veces lo que sería la mitad.

La propiedad transition-duration

Esta propiedad establece cuanto tiene que durar la transición. Se puede especificar tanto en segundos (s) como en milisegundos (ms). Para darle un efecto fluido, vamos a especificar un período de 0.2 segundos o 200 milisegundos. Añadimos las siguientes reglas CSS a #encojer.

CSS
1
2
3
4
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;

transition en css - resultado

Resultado de emplear las transiciones

Y hasta aquí por ahora las transiciones en CSS, espero que os haya gustado y os salgan animaciones interesantes. A seguir picando 🙂