Transiciones CSS3 | TIEngranaje

«¿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>

TRANSICIONES en CSS | Crea Animaciones con CSS

Aprende a utilizar las transiciones en CSS3, en este vídeo aprenderás el uso de transiciones en CSS además de comprender ...

Deja un comentario