diff options
Diffstat (limited to 'files/fr/web/css/css_animations')
4 files changed, 9 insertions, 13 deletions
diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html index 0824678ff8..7f33e6daf9 100644 --- a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animation <div>{{CSSRef}}{{obsolete_header}}</div> <div class="warning"> -<p><strong>Attention !</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p> +<p><strong>Attention :</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p> </div> <p>Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, <a href="https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">basé sur ce billet de Christian Heilmann</a>, illustre une technique pour détecter la prise en charge des animations CSS.</p> @@ -96,5 +96,5 @@ if( animation === false ) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Les animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Les animations CSS</a></li> </ul> diff --git a/files/fr/web/css/css_animations/index.html b/files/fr/web/css/css_animations/index.html index 393e33754d..a0db694124 100644 --- a/files/fr/web/css/css_animations/index.html +++ b/files/fr/web/css/css_animations/index.html @@ -15,7 +15,6 @@ original_slug: Web/CSS/Animations_CSS <h3 id="Propriétés_CSS">Propriétés CSS</h3> -<div class="index"> <ul> <li>{{cssxref("animation")}}</li> <li>{{cssxref("animation-delay")}}</li> @@ -27,15 +26,12 @@ original_slug: Web/CSS/Animations_CSS <li>{{cssxref("animation-play-state")}}</li> <li>{{cssxref("animation-timing-function")}}</li> </ul> -</div> <h3 id="Règles_CSS">Règles @ CSS</h3> -<div class="index"> <ul> <li>{{cssxref("@keyframes")}}</li> </ul> -</div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/web/css/css_animations/tips/index.html b/files/fr/web/css/css_animations/tips/index.html index adb261195e..011e1c6e3a 100644 --- a/files/fr/web/css/css_animations/tips/index.html +++ b/files/fr/web/css/css_animations/tips/index.html @@ -22,8 +22,7 @@ original_slug: Web/CSS/Animations_CSS/Conseils <p>Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).</p> -<div class="hidden"> -<pre class="brush: css">.runButton { +<pre class="brush: css hidden">.runButton { cursor: pointer; width: 300px; border: 1px solid black; @@ -36,7 +35,6 @@ original_slug: Web/CSS/Animations_CSS/Conseils background-color: darkgreen; font: 14px "Open Sans", "Arial", sans-serif; }</pre> -</div> <pre class="brush: css">@keyframes colorchange { 0% { background: yellow } diff --git a/files/fr/web/css/css_animations/using_css_animations/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html index ab83e1e420..2c0364c3f4 100644 --- a/files/fr/web/css/css_animations/using_css_animations/index.html +++ b/files/fr/web/css/css_animations/using_css_animations/index.html @@ -56,7 +56,9 @@ original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS <h2 id="Exemples">Exemples</h2> -<div class="note"><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</div> +<div class="note"> + <p><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</p> +</div> <h3 id="Utiliser_une_animation_pour_que_le_texte_traverse_la_fenêtre_du_navigateur">Utiliser une animation pour que le texte traverse la fenêtre du navigateur</h3> @@ -231,7 +233,7 @@ her in a languid, sleepy voice.</p> }</pre> <div class="note"> -<p><strong>Note </strong>: Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p> +<p><strong>Note :</strong> Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p> </div> <h3 id="Utiliser_plusieurs_valeurs_pour_différentes_animations">Utiliser plusieurs valeurs pour différentes animations</h3> @@ -358,7 +360,7 @@ element.className = "slidein"; <ul> <li>{{domxref("AnimationEvent")}}</li> - <li><a href="/fr/docs/Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Manipuler les transitions CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Détecter la prise en charge des animations CSS</a></li> + <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Manipuler les transitions CSS</a></li> <li><a href="https://www.cssdebutant.com">CSS</a></li> </ul> |