diff options
Diffstat (limited to 'files/fr/web/css/css_transitions')
| -rw-r--r-- | files/fr/web/css/css_transitions/index.md | 75 | ||||
| -rw-r--r-- | files/fr/web/css/css_transitions/using_css_transitions/index.md | 291 |
2 files changed, 170 insertions, 196 deletions
diff --git a/files/fr/web/css/css_transitions/index.md b/files/fr/web/css/css_transitions/index.md index c9bcefcbf6..d7fb6abc82 100644 --- a/files/fr/web/css/css_transitions/index.md +++ b/files/fr/web/css/css_transitions/index.md @@ -8,50 +8,31 @@ tags: - Reference translation_of: Web/CSS/CSS_Transitions --- -<div>{{CSSRef}}</div> - -<p>Les <strong>transitions CSS</strong> permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage.</p> - -<h2 id="Référence">Référence</h2> - -<h3 id="Propriétés">Propriétés</h3> - -<ul> - <li>{{cssxref("transition")}}</li> - <li>{{cssxref("transition-delay")}}</li> - <li>{{cssxref("transition-duration")}}</li> - <li>{{cssxref("transition-property")}}</li> - <li>{{cssxref("transition-timing-function")}}</li> -</ul> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></dt> - <dd>Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent.</dd> -</dl> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Transitions')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Apparentées aux transitions CSS, les <a href="/fr/docs/Web/CSS/Animations_CSS">animations CSS</a> peuvent déclencher des animations indépendamment du changement des valeurs spécifiées.</li> -</ul> +{{CSSRef}} + +Les **transitions CSS** permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage. + +## Référence + +### Propriétés + +- {{cssxref("transition")}} +- {{cssxref("transition-delay")}} +- {{cssxref("transition-duration")}} +- {{cssxref("transition-property")}} +- {{cssxref("transition-timing-function")}} + +## Guides + +- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) + - : Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent. + +## Spécifications + +| Spécification | État | Commentaire | +| -------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS3 Transitions')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. | + +## Voir aussi + +- Apparentées aux transitions CSS, les [animations CSS](/fr/docs/Web/CSS/Animations_CSS) peuvent déclencher des animations indépendamment du changement des valeurs spécifiées. diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.md b/files/fr/web/css/css_transitions/using_css_transitions/index.md index 9403828edb..6cea275461 100644 --- a/files/fr/web/css/css_transitions/using_css_transitions/index.md +++ b/files/fr/web/css/css_transitions/using_css_transitions/index.md @@ -9,70 +9,60 @@ tags: translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS --- -<div>{{CSSref}}</div> +{{CSSref}} -<p>Les <strong>transitions CSS</strong> permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.</p> +Les **transitions CSS** permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée. -<p>Les animations qui utilisent des transitions entre deux états sont souvent appelées <em>transitions implicites</em> car l'état initial et l'état final sont définis implicitement par le navigateur.</p> +Les animations qui utilisent des transitions entre deux états sont souvent appelées _transitions implicites_ car l'état initial et l'état final sont définis implicitement par le navigateur. -<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="transitionsprinciple.png"></p> + -<p>Les transitions CSS vous permettent de choisir :</p> +Les transitions CSS vous permettent de choisir : -<ul> - <li>les propriétés à animer en les listant explicitement</li> - <li>le début de l'animation</li> - <li>la durée de l'animation</li> - <li>la façon dont la transition s'exécutera</li> -</ul> +- les propriétés à animer en les listant explicitement +- le début de l'animation +- la durée de l'animation +- la façon dont la transition s'exécutera -<h2 id="Quelles_sont_les_propriétés_CSS_qui_peuvent_être_animées">Quelles sont les propriétés CSS qui peuvent être animées ?</h2> +## Quelles sont les propriétés CSS qui peuvent être animées ? -<p>On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et <a href="/fr/docs/Web/CSS/CSS_animated_properties">la liste des propriétés concernées est limitée</a>.</p> +On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et [la liste des propriétés concernées est limitée](/fr/docs/Web/CSS/CSS_animated_properties). -<div class="note"> - <p><strong>Note :</strong> La gestion de la valeur <code>auto</code> représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec <code>auto</code>.</p> -</div> +> **Note :** La gestion de la valeur `auto` représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec `auto`. -<div class="note"> - <p><strong>Note :</strong> Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via <code>.appendChild()</code> ou en modiant <code>display: none;</code>. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer <code>window.setTimeout()</code> pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.</p> -</div> +> **Note :** Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via `.appendChild()` ou en modiant `display: none;`. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer `window.setTimeout()` pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition. -<h2 id="Les_propriétés_CSS_relatives_aux_transitions">Les propriétés CSS relatives aux transitions</h2> +## Les propriétés CSS relatives aux transitions -<p>Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :</p> +Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes : -<div class="note"> -<p><strong>Note :</strong>Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.</p> -</div> +> **Note :**Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}. -<dl> - <dt>{{cssxref("transition-property")}}</dt> - <dd>Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.</dd> - <dt>{{cssxref("transition-duration")}}</dt> - <dd>Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés. - </dd> - <dt>{{cssxref("transition-timing-function")}}</dt> - <dd>Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des <a href="/fr/docs/Web/CSS/easing-function">fonctions de temporisation</a>. - </dd> - <dt>{{cssxref("transition-delay")}}</dt> - <dd>Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition. - </dd> -</dl> +- {{cssxref("transition-property")}} + - : Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées. +- {{cssxref("transition-duration")}} + - : Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés. +- {{cssxref("transition-timing-function")}} + - : Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des [fonctions de temporisation](/fr/docs/Web/CSS/easing-function). +- {{cssxref("transition-delay")}} + - : Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition. -<p>La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :</p> +La syntaxe de la propriété raccourcie {{cssxref("transition")}} est : -<pre class="brush: css">div { - transition: <property> <duration> <timing-function> <delay>; -}</pre> +```css +div { + transition: <property> <duration> <timing-function> <delay>; +} +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Un_exemple_simple">Un exemple simple</h3> +### Un exemple simple -<p>Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :</p> +Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément : -<pre class="brush: css">#delay { +```css +#delay { font-size: 14px; transition-property: font-size; transition-duration: 4s; @@ -81,18 +71,22 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS #delay:hover { font-size: 36px; -}</pre> +} +``` -<h3 id="Exemple_avec_plusieurs_propriétés_animées">Exemple avec plusieurs propriétés animées</h3> +### Exemple avec plusieurs propriétés animées -<pre class="brush: html hidden highlight:[3]"><body> - <p>La boîte ci-dessous utilise des transitions pour les propriétés : width, height, background-color, transform. Survolez la boîte pour voir les animations.</p> - <div class="box">Sample</div> -</body></pre> +```html hidden +<body> + <p>La boîte ci-dessous utilise des transitions pour les propriétés : width, height, background-color, transform. Survolez la boîte pour voir les animations.</p> + <div class="box">Sample</div> +</body> +``` -<h4 id="CSS_Content">CSS Content</h4> +#### CSS Content -<pre class="brush: css; highlight:[8,9]">.box { +```css +.box { border-style: solid; border-width: 1px; display: block; @@ -108,16 +102,16 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS height: 200px; transform: rotate(180deg); } -</pre> +``` -<p>{{EmbedLiveSample('Exemple_avec_plusieurs_propriétés_animées', 600, 300)}}</p> +{{EmbedLiveSample('Exemple_avec_plusieurs_propriétés_animées', 600, 300)}} +### Appliquer une transition sur plusieurs propriétés -<h3 id="Appliquer_une_transition_sur_plusieurs_propriétés">Appliquer une transition sur plusieurs propriétés</h3> +#### CSS -<h4 id="CSS">CSS</h4> - -<pre class="brush: css; highlight:[8,9]">.box { +```css +.box { border-style: solid; border-width: 1px; display: block; @@ -133,67 +127,77 @@ original_slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS height: 200px; transform: rotate(180deg); } -</pre> +``` -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html; highlight:[3]"><p>Cette boîte utilisera des transitions pour width, height, background-color, transform. - Survolez cette boîte pour voir l'effet.</p> -<div class="box"></div> -</pre> +```html +<p>Cette boîte utilisera des transitions pour width, height, background-color, transform. + Survolez cette boîte pour voir l'effet.</p> +<div class="box"></div> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}</p> +{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}} -<h3 id="Le_rôle_de_la_taille_des_listes_de_valeurs">Le rôle de la taille des listes de valeurs</h3> +### Le rôle de la taille des listes de valeurs -<p>Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :</p> +Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi : -<pre class="brush: css">div { +```css +div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s; } -</pre> +``` -<p>Sera équivalent à :</p> +Sera équivalent à : -<pre class="brush: css">div { +```css +div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s; -}</pre> +} +``` -<p>De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,</p> +De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi, -<pre class="brush: css">div { +```css +div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; -}</pre> +} +``` -<p>Sera équivalent à :</p> +Sera équivalent à : -<pre class="brush: css">div { +```css +div { transition-property: opacity, left; transition-duration: 3s, 5s; -}</pre> +} +``` -<h3 id="Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu">Utiliser les transitions pour accentuer les éléments pour un menu</h3> +### Utiliser les transitions pour accentuer les éléments pour un menu -<p>On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.</p> +On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu. -<p>Tout d'abord, on définit le menu en HTML :</p> +Tout d'abord, on définit le menu en HTML : -<pre class="brush: html"><nav> - <a href="#">Accueil</a> - <a href="#">À propos</a> - <a href="#">Contact</a> - <a href="#">Liens</a> -</nav> -</pre> +```html +<nav> + <a href="#">Accueil</a> + <a href="#">À propos</a> + <a href="#">Contact</a> + <a href="#">Liens</a> +</nav> +``` -<p>On construit le CSS pour définir l'apparence du menu :</p> +On construit le CSS pour définir l'apparence du menu : -<pre class="brush: css">a { +```css +a { color: #fff; background-color: #333; transition: all 1s ease-out; @@ -203,9 +207,11 @@ a:hover, a:focus { color: #333; background-color: #fff; -}</pre> +} +``` -<pre class="brush: css hidden">html, +```css hidden +html, body { margin: 0; padding: 0; @@ -231,34 +237,37 @@ a { a:not(:last-child) { margin-right: 12px; } -</pre> +``` -<p>Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.</p> +Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change. -<p>{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}</p> +{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}} -<h2 id="Exemples_avec_JavaScript">Exemples avec JavaScript</h2> +## Exemples avec JavaScript -<h3 id="Utiliser_les_transitions_CSS_pour_lisser_les_transformations_avec_JavaScript">Utiliser les transitions CSS pour lisser les transformations avec JavaScript</h3> +### Utiliser les transitions CSS pour lisser les transformations avec JavaScript -<p>Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :</p> +Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple : -<pre class="brush: html"><p>Click anywhere to move the ball</p> -<div id="foo"></div> -</pre> +```html +<p>Click anywhere to move the ball</p> +<div id="foo"></div> +``` -<p>Avec JavaScript on peut ajouter un effet de mouvement sur la balle :</p> +Avec JavaScript on peut ajouter un effet de mouvement sur la balle : -<pre class="brush: js">var f = document.getElementById('foo'); +```js +var f = document.getElementById('foo'); document.addEventListener('click', function(ev){ f.style.transform = 'translateY('+(ev.clientY-25)+'px)'; f.style.transform += 'translateX('+(ev.clientX-25)+'px)'; },false); -</pre> +``` -<p>Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :</p> +Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière : -<pre class="brush: css">p { +```css +p { padding-left: 60px; } @@ -272,57 +281,41 @@ document.addEventListener('click', function(ev){ left: 0; transition: transform 1s; } -</pre> +``` -<p>{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}</p> +{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}} -<h3 id="Détecter_le_début_et_la_fin_d'une_transition">Détecter le début et la fin d'une transition</h3> +### Détecter le début et la fin d'une transition -<p>L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :</p> +L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} : -<dl> - <dt><code>propertyName</code></dt> - <dd>Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.</dd> - <dt><code>elapsedTime</code></dt> - <dd>Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.</dd> -</dl> +- `propertyName` + - : Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée. +- `elapsedTime` + - : Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}. -<p>Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :</p> +Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement : -<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true); -</pre> +```js +el.addEventListener("transitionend", updateTransition, true); +``` -<p>Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :</p> +Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement : -<pre class="brush: js">el.addEventListener("transitionrun", signalStart, true); -el.addEventListener("transitionstart", signalStart, true);</pre> +```js +el.addEventListener("transitionrun", signalStart, true); +el.addEventListener("transitionstart", signalStart, true); +``` -<div class="note"> - <p><strong>Note :</strong> L'événement <code>transitionend</code> n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}<code>: none</code> ou si la valeur de la propriété est modifiée.</p> -</div> +> **Note :** L'événement `transitionend` n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}`: none` ou si la valeur de la propriété est modifiée. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Transitions', '', '')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------- | ---------------------------------------- | -------------------- | +| {{SpecName('CSS3 Transitions', '', '')}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. | -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface {{domxref("TransitionEvent")}} et l'événement {{event("transitionend")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Utiliser les animations CSS</a></li> -</ul> +- L'interface {{domxref("TransitionEvent")}} et l'événement {{event("transitionend")}} +- [Utiliser les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations) |