CSS

Transiciones en CSS

Las transiciones en CSS son fundamentales para crear páginas con un diseño atractivo y moderno, es por eso que en este tutorial aprenderemos a crear nuestras propias transiciones.

¿Cómo crear transiciones en CSS?

Para crear transiciones en CSS vamos a utilizar la propiedad transition, con la cual cambiaremos el color y tamaño de un cuadrado al pasar el mouse sobre el mismo:

<html>
  <head>
    <title>Transiciones en CSS</title>
    <style>
      #cuadrado {
        transition: all 0.5s ease;
        background: red;
        width: 200px;
        height: 200px;
      }
      #cuadrado:hover {
        background: green;
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div id="cuadrado"></div>
  </body>
</html>

De esta forma con la propiedad transition estamos indicando que queremos aplicar la transición a todas las propiedades, con una duración de medio segundo. Ahora si solamente queremos aplicar la transición a una propiedad podemos hacer lo siguiente:

transition: width 0.5s ease; /* Solamente se aplica a la propiedad width*/

Si queremos que las transiciones funcionen en distintos navegadores debemos usar distintas variantes de la propiedad transition como se muestra en el siguiente ejemplo:

-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo crear transiciones en CSS, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *