Utilitaires d'animations

Vue d'ensemble

Sass Swing met à disposition des variables utilitaires pour controller les paramètres de transition et de transformations. Elles peuvent être également utilisé pour créer des animations au survol.

Liste des variables utilitaires disponibles pour contrôler les transitions et transformations :

--translate Translation x et y MDN Référence
<style="--translate:valeurX, valeurY ;">

--translateX Translation X MDN Référence
<style="--translateX:valeur;">

--translateY Translation Y MDN Référence
<style="--translateY:valeur;">

--rotate Rotation MDN Référence
<style="--rotate:valeur;">

--scale Homothétie x et y MDN Référence
<style="--scale:valeurX, valeurY ;">

--scaleX Homothétie X MDN Référence
<style="--scaleX:valeur;">

--scaleY Homothétie Y MDN Référence
<style="--scaleY:valeur;">

--skew Obliquer x et y MDN Référence
<style="--skew:valeurX, valeurY ;">

--skewX Obliquer X MDN Référence
<style="--skewX:valeur;">

--skewY Obliquer Y MDN Référence
<style="--skewY:valeur;">

--origin Transformation origin MDN Référence
<style="--origin:valeur;">

--t-delay Transition delay MDN Référence
<style="--t-delay:valeur;">

--t-duration Transition duration MDN Référence
<style="--t-duration:valeur;">

--t-func Transition timing function MDN Référence
<style="--t-func:valeur;">

--op-hvr Opacité au survol
<style="--op-hvr:valeur ;">

--translate-hvr Translation x et y au survol
<style="--translate-hvr:valeurX, valeurY ;">

--translateX-hvr Translation X au survol
<style="--translateX-hvr:valeur;">

--translateY-hvr Translation Y au survol
<style="--translateY-hvr:valeur;">

--rotate-hvr Rotation au survol
<style="--rotate-hvr:valeur;">

--scale-hvr Homothétie x et y au survol
<style="--scale-hvr:valeurX, valeurY ;">

--scaleX-hvr Homothétie X au survol
<style="--scaleX-hvr:valeur;">

--scaleY-hvr Homothétie Y au survol
<style="--scaleY-hvr:valeur;">

--skew-hvr Obliquer x et y au survol
<style="--skew:valeurX, valeurY ;">

--skewX-hvr Obliquer X au survol
<style="--skewX-hvr:valeur;">

--skewY-hvr Obliquer Y au survol
<style="--skewY-hvr:valeur;">

--a-name Animation name MDN Référence
<style="--a-name:valeur;">

--a-delay Animation delay MDN Référence
<style="--a-delay:valeur;">

--a-duration Animation duration MDN Référence
<style="--a-duration:valeur;">

--a-func Animation timing function MDN Référence
<style="--a-func:valeur;">

--a-dir Animation direction MDN Référence
<style="--a-dir:valeur;">

--a-mode Animation fill mode MDN Référence
<style="--a-mode:valeur;">

opacity
translate
rotation
scale
skew 
<div class="box-sample" style="--op:.5;">
	opacity
</div>

<div class="box-sample" style="--translate:1em, 1.5em;">
	translate
</div>

<div class="box-sample" style="--origin:center; --rotate:45deg;">
	rotation
</div>

<div class="box-sample" style="--scale:.75;">
	scale
</div>

<div class="box-sample" style="--skew:-15deg, 25deg;">
	skew
</div>

Animations

opacity
translate
rotation
scale
skew
Multiple 
<div class="box-sample" style="--op:.5; --op-hvr:1;--crs:pointer;">
	opacity
</div>

<div class="box-sample" style="--translateX:0; --translateX-hvr:1em;--crs:pointer;">
	translate
</div>

<div class="box-sample" style="--origin:center; --rotate:0deg; --rotate-hvr:1turn;--crs:pointer">
	rotation
</div>

<div class="box-sample" style="--origin:center; --scale:.75; --scale-hvr:1.1;--crs:pointer;">
	scale
</div>

<div class="box-sample" style="--skewX:0deg; --skew-hvr: 15deg, -25deg;--t-delay:.5s;--crs:pointer;">
	skew
</div>

<div class="box-sample" style="--op:.25; --op-hvr:1; --origin:center; --rotate:0deg; --translateX:0; --translateX-hvr:50%; --rotate-hvr:-1turn;--t-duration:2s;--crs:pointer;">
	Multiple
</div>