Transiciones
Transiciones transition-property transition-duration transition-timing-function transition-delay

Transiciones

En el siguiente punto vamos a ver las transiciones, las cuales nos va a permitir dar ciertos efectos a nuestros diseños web para que sean más elegantes o agradables para el usuario final.

Las transiciones buscan tener un efecto suavizado entre dos instantes de tiempo al realizar una acción. Las propiedades que tenemos para trabajar las transiciones son:

transition-property

Esta propiedad CSS establece la propiedad CSS a la que se le aplicará una transición. Se puede especificar la propiedad concreta (margin, color…) o poner all como señal que será para todas las propiedades css. En el caso de poner none será que no se aplique ninguna transición. Podemos encontrar un ejemplo aquí, donde el tamaño de la fuente cambia al pasar el ratón por encima.

transition-duration

Duración de una transición, puede ser 0 ó un determinado tiempo indicado en segundos o milisegundos. Es importante tener en cuenta que una transición grande (larga) resulta molesta y puede que el navegador “vaya a trompicones”.

transition-timing-function

Corresponde al ritmo de la transición, es decir establece cómo de rápido pasarían a calcularse las propiedades a las cuales se le aplicará el efecto. Los valores que puede tomar esta propiedad son: ease, linear, ease-in, ease-out, ease-in-out, entre otros.

transition-delay

La propiedad transition-delay nos permite retrasar el inicio de la transición unos segundos. Si no especificamos nada en el transition-delay comenzaría de inmediato.

Como siempre podemos resumir o atajar estas propiedades usando la propiedad transition que recoge todas ellas. transition: <property> <duration><timing-function><delay>.

a {
    font-size: 2rem;
    background-color: palegoldenrod;
    transition: background-color 2s 500ms;
    &:hover {
        background-color: darkorange;
    }
}

En la propiedad transition, podemos separar por comas varias propiedades que queremos transicionar, es decir, podríamos decir que para el hover del enlace queremos que el background-color cambie pero también podemos decirle que rote, cambie de tamaño, etc.

a {
    margin: 200px auto;
    font-size: 2rem;
    background-color: yellow;
    display: block;
    width: fit-content;
    height: 100px;
    transition: width 2s,
                height 2s,
                background-color 2s,
                rotate 2s;

    &:hover {
        background-color: darkorange;
        width: 200px;
        height: 200px;
        rotate: 180deg;
    }
}

Apartados de esta sección

Animaciones

regla @keyframes

<< Transformaciones Animaciones >>