transition (_vendor.scscs)

Tipo: Mixin

Versión: 2.x.x

Mixin vendor de SISASS para la propiedad transition.

Define cómo cambian de forma animada una o varias propiedades CSS entre un estado y otro. Aplica la propiedad con los prefijos históricos disponibles y después agrega la versión estándar.

Interface

@mixin transition($br: none);

Parámetros secuenciales

Parámetro	Tipo	Default	Descripción
br	String	none	Define el valor que se asignará a transition.

Ejemplo

En este ejemplo, ambos bloques parten con opacity: 0.5. El primero cambia a opacidad completa de forma inmediata al pasar el cursor. El segundo aplica una transición sobre opacity, por lo que el cambio ocurre de manera gradual y la diferencia se percibe con claridad.

Sin transition

Hover

transition: opacity .35s ease

Hover

<div class="transition_example">
    <div><h3 class="subtitle">Sin transition</h3><div class="box">Hover</div></div>
    <div><h3 class="subtitle">transition: opacity .35s ease</h3><div class="box animated">Hover</div></div>
</div>