Animaciones en CSS3: transiciones en CSS3

Hace ya tiempo que no escribo y eso no puede ser. Así que hoy os quiero hablar de animaciones, en concreto me voy a centrar en transiciones con CSS3 o como se diría en ingles CSS3 transitions.

Lo primero es sentar unas bases de lo que es una transición. Básicamente cuando hablamos de transitions en CSS3, lo que hacemos referencia es una pequeña animación de css que se ejecutará como mezcla de 2 o mas clases. En concreto una transición de CSS3, lo que indica es que propiedades cambiarán con una animación. Pero es mas fácil con un ejemplo:

.clase-indalcasa {
  -webkit-transition: all 1s ease-in-out 0.2s;
  -moz-transition: all 1s ease-in-out 0.2s;
  -ms-transition: all 1s ease-in-out 0.2s;
  -o-transition: all 1s ease-in-out 0.2s;
  transition: all 1s ease-in-out 0.2s;
}

Si nos damos cuenta del código anterior, que se repite una y otra vez para dar salida a todos los metas de navegador experimental, veremos que la sintaxis básica es:

transition: [propiedades] [duración] [functión de tiempo] [tiempo de espera, retardo]

Como podemos ver, ahora entendemos mejor que hace referencia en la clase, tomando con concepto que todos los elementos son opcionales. A continuación una explicación más detallada:

  • propiedades (properties): son las propiedades que van a ser afectadas por la transición. Es un listado separado por comas «,». Por ejemplo, si queremos aplicar a todas las propiedades de un elemento usariamos «all», mientras que si queremos afectar por ejemplo a la altura y anchura usariamos «width, height» y así ir añadiendo propiedades a las que afectar. Al final dejare una tabla con una relación de los propiedades a afectar.
  • duración (duration): la duración se indica o bien en segundos o en milisegundos. Para ello después del número de cantidad, indicamos 0.5s o 500ms para indicar medio segundo. Si tenemos varias propiedades separadas por comas, podemos indicar los tiempos de manera similar para cada una de las propiedades.
  • función de tiempo (timing function): está es quizas la configuración mas interesante, ya que nos permite indicar que función de tiempo vamos a utilizar en la transición. Por defecto hay definidas varias definidas o utilizar un cubic-bezier para definir nosotros una personalizada.
    • ease: mantiene una aceleración y frenada al principio y al final de la animación.
    • ease-in: tiene una aceleración y el final es constante hasta que termina.
    • ease-out: no tiene aceleración, sino que alcanza su tope desde el principio pero va frenando poco a poco.
    • ease-in-out: similar a ease pero con la aceleración y frenada mas prolongadas.
    • linear: es como su nombre indica, linear y constante en el tiempo
    • cubic-bezier: nos permite definir una función de curva de bezier personalizada. Esto da para todo un tema aparte y para empezar a entender que es: Curva de Bezier en Wikipedia
  • tiempo de espera, retardo (delay): al igual que la duración, se indica en segundos o milisegundos.

Ahora algunos ejemplos:

pasame
por encima

El código de este ejemplo sería:

.indalcasa-transition-hover {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 0.3);
  -webkit-transition: all 2s ease-in-out;
  margin: 20px auto;
  line-height: 50px;
  text-align: center;			
}

.indalcasa-transition-hover:hover {
  width: 500px;
  height: 500px;
  background: rgba(0, 255, 0, 0.3);
  font-size: 50px;
  line-height: 250px;
  border-radius: 250px
}
<div class="indalcasa-transition-hover">pasame<br/>por encima</div>

Por último y para terminar esta breve explicación, una tabla de propiedades que se pueden o no cambiar con las transiciones.

Nombre de la propiedad Tipo de valor
background-color color: nombre, hexadecimal, rgb, rgba
background-image gradientes de css
background-position porcentaje, tamaño: pixeles, em, etc
border-bottom-color color: nombre, hexadecimal, rgb, rgba
border-bottom-width tamaño: pixeles, em, etc
border-color color: nombre, hexadecimal, rgb, rgba
border-left-color color: nombre, hexadecimal, rgb, rgba
border-left-width tamaño: pixeles, em, etc
border-right-color color: nombre, hexadecimal, rgb, rgba
border-right-width tamaño: pixeles, em, etc
border-spacing tamaño: pixeles, em, etc
border-top-color color: nombre, hexadecimal, rgb, rgba
border-top-width tamaño: pixeles, em, etc
border-width tamaño: pixeles, em, etc
bottom tamaño: pixeles, em, etc, porcentaje
color color: nombre, hexadecimal, rgb, rgba
crop rectangulo
font-size tamaño: pixeles, em, etc, porcentaje
font-weight número, nombre
grid-* varios
height tamaño: pixeles, em, etc, porcentaje
left tamaño: pixeles, em, etc, porcentaje
letter-spacing tamaño: pixeles, em, etc
line-height número, tamaño: pixeles, em, etc, porcentaje
margin-bottom tamaño: pixeles, em, etc
margin-left tamaño: pixeles, em, etc
margin-right tamaño: pixeles, em, etc
margin-top tamaño: pixeles, em, etc
max-height tamaño: pixeles, em, etc, porcentaje
max-width tamaño: pixeles, em, etc, porcentaje
min-height tamaño: pixeles, em, etc, porcentaje
min-width tamaño: pixeles, em, etc, porcentaje
opacity número de opacidad, de 0.0 a X
outline-color color: nombre, hexadecimal, rgb, rgba
outline-offset número
outline-width tamaño: pixeles, em, etc
padding-bottom tamaño: pixeles, em, etc
padding-left tamaño: pixeles, em, etc
padding-right tamaño: pixeles, em, etc
padding-top tamaño: pixeles, em, etc
right tamaño: pixeles, em, etc, porcentaje
text-indent tamaño: pixeles, em, etc, porcentaje
text-shadow valores
top tamaño: pixeles, em, etc, porcentaje
vertical-align nombres, tamaño: pixeles, em, etc, porcentaje
visibility valores de css
width tamaño: pixeles, em, etc, porcentaje
word-spacing tamaño: pixeles, em, etc, porcentaje
z-index posición de entero
zoom número