Transiciones de una propiedad (transition)

Las transiciones en css3 permiten modificar el valor de una propiedad de un elemento HTML en forma gradual durante un tiempo determinado de un estado inicial a un estado final.

La sintaxis más simple para definir una transición de una propiedad es:

Elemento {
      transition: [nombre de propiedad] [duración de la transición] ;
}

Por ejemplo crearemos dos recuadro y cuando pasemos la flecha del mouse sobre el mismo cambiaremos su tamaño. El primer recuadro lo haremos sin transición:

#recuadro1{
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}

#recuadro1:hover{
  width:300px;
}

Cuando probamos la página veremos que el recuadro1 cambia el ancho del recuadro de 200 píxeles a 300 píxeles en forma instantanea al pasar la flecha del mouse.

Ahora si definimos la propiedad transition indicando que actúe sobre la propiedad width y que el cambio lo realice en 1 segundo:

#recuadro2{
  border-radius: 20px;  
  background-color:#ff0;
  width:200px;
  padding:10px;
  transition:width 1s;
  -moz-transition:width 1s;
  -ms-transition:width 1s;
  -webkit-transition:width 1s;
  -o-transition:width 1s;
}

#recuadro2:hover{
  width:300px;
}

Luego tenemos la siguiente sintaxis:

  transition:width 1s;

Como vemos indicamos que la transición afecta a la propiedad width y que el cambio se realice en 1 segundo. Debemos agregar la propiedad con cada prefijo de navegador hasta que se estabilice su uso.


Retornar