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