«¿Estás buscando una forma fácil y efectiva de darle vida a tus diseños web? Las transiciones CSS3 son la solución perfecta para lograr una experiencia visual impresionante y hacer que tus elementos se muevan con estilo. En este artículo, exploraremos todo lo que necesitas saber sobre las transiciones CSS3 y cómo utilizarlas en tus proyectos con TIEngranaje.»
Transiciones CSS3 permitir a los desarrolladores web introducir efectos al permitir cambios de propiedad en los valores CSS. Estos cambios generalmente se definen para que ocurran cuando ocurren ciertos eventos, como :hover o :focus.
Transiciones especificar cómo deben hacer la transición y durante cuánto tiempo. Los efectos de transición se pueden aplicar a una amplia variedad de propiedades CSS como ancho, alto, color de fondo, opacidad y otros.
Compatibilidad con navegador
explorador de Internet 9 no soporta la propiedad de transición. Otros navegadores como Internet Explorer 10, Firefox, Chrome, Safari y Opera proporcionan apoyo pero implementar prefijos de proveedores. Entonces, por el momento, necesitará usar varios prefijos de proveedores en su código para una solución de navegador cruzado.
| Navegador | Prefijo de proveedor |
|---|---|
| explorador de Internet 10 | -ms-transition |
| Firefox | -moz-transition |
| Ópera | -o-transition |
| Safari | -webkit-transition |
| Cromo | -webkit-transition |
¿Cómo funcionan las transiciones?
Las transiciones CSS3 son efectos que permiten que un elemento cambie gradualmente cambiar de un estilo a otro. Para lograr este efecto, debe especificar la propiedad CSS a la que desea agregar un efecto y la duración del efecto.
Propiedad de transición
El transition property es una propiedad abreviada para establecer el cuatro propiedades de transición en una sola propiedad.
| Propiedad | Descripción |
|---|---|
transition |
Una propiedad abreviada para establecer las cuatro propiedades de transición en una sola propiedad. |
transition-property |
Especifica el nombre de la propiedad CSS a la que se aplica la transición. |
transition-duration |
Define el tiempo que tarda una transición. El valor predeterminado es 0. El transition-duration el valor se define en segundos (s) o milisegundos (ms). |
transition-timing-function |
Describe cómo se calculará la velocidad durante una transición. El valor predeterminado es ease. (linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)) |
transition-delay |
Define cuándo comenzará la transición. El valor predeterminado es 0. El transition-delay el valor se define en segundos (s) o milisegundos (ms). |
Sintaxis de propiedad de transición
transition: property duration timing-function delay;Ejemplos
Aquí hay un ejemplo simple que cambia el ancho de un elemento usando una transición simple. Desde el transition-timing el valor de la función es no definidael valor predeterminado de ease se aplicará.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:1px solid black;
width:100px;
height:100px;
background:#FFAA00;
-moz-transition:width 3s;
-webkit-transition:width 3s;
-o-transition:width 3s;
transition:width 3s;
}
div:hover {
width:500px;
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>He aquí un ejemplo que muestra los diferentes funciones de temporización.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 520px;
}
#main div {
width: 100px;
margin: 5px 0;
padding: 5px;
color: white;
background-color: #ffaa00;
text-align: right;
border-radius: 5px;
}
#main:hover div {
width: 500px;
}
#main div#ease {
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
}
#main div#linear {
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
#main div#easein {
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
-ms-transition: 3s ease-in;
transition: 3s ease-in;
}
#main div#easeout {
-webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-o-transition: 3s ease-out;
-ms-transition: 3s ease-out;
transition: 3s ease-out;
}
#main div#easeinout {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}
</style>
</head>
<body>
<div id="main">
<div id="linear" style="top:100px">linear</div>
<div id="ease" style="top:150px">ease</div>
<div id="easein" style="top:200px">ease-in</div>
<div id="easeout" style="top:250px">ease-out</div>
<div id="easeinout" style="top:300px">ease-in-out</div>
</div>
</body>
</html>Transiciones Múltiples
Para agregar un efecto de transición para más de un estilo, añadir más propiedadesseparado por comas
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:1px solid black;
width:100px;
height:100px;
background:#FFAA00;
-moz-transition:width 3s, height 3s;
-webkit-transition:width 3s, height 3s;
-o-transition:width 3s, height 3s;
transition:width 3s, height 3s;
}
div:hover {
width:500px;
height:250px;
}
</style>
</head>
<body>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>