Blog
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.