{"id":556,"date":"2026-02-15T13:45:02","date_gmt":"2026-02-15T12:45:02","guid":{"rendered":"https:\/\/lmspro.fr\/?p=556"},"modified":"2026-02-17T19:38:02","modified_gmt":"2026-02-17T18:38:02","slug":"les-animations-css-avancees-part1","status":"publish","type":"post","link":"https:\/\/lmspro.fr\/en\/les-animations-css-avancees-part1\/","title":{"rendered":"Advanced CSS Animations Part 1"},"content":{"rendered":"<h2>2.3 Les Animations CSS Avanc\u00e9es<\/h2>\n<p class=\"wpa-text\">Plongez dans l&rsquo;univers fascinant des animations CSS avanc\u00e9es et d\u00e9couvrez comment cr\u00e9er des exp\u00e9riences utilisateur captivantes et interactives. Ma\u00eetrisez les techniques modernes d&rsquo;animation pour donner vie \u00e0 vos interfaces web avec fluidit\u00e9 et \u00e9l\u00e9gance.<\/p>\n<div class=\"article-meta\">\n<p><strong>Module :<\/strong> Module 1 : Fondamentaux techniques du web<\/p>\n<p><strong>Niveau :<\/strong> Interm\u00e9diaire<\/p>\n<p><strong>Dur\u00e9e :<\/strong> 30 minutes<\/p>\n<p><strong>Pr\u00e9requis :<\/strong> Bases CSS et propri\u00e9t\u00e9s de transformation<\/p>\n<\/div>\n<h2>Objectifs p\u00e9dagogiques<\/h2>\n<ul>\n<li>Ma\u00eetriser les propri\u00e9t\u00e9s d&rsquo;animation CSS avanc\u00e9es et les keyframes<\/li>\n<li>Cr\u00e9er des transitions fluides et des effets visuels complexes<\/li>\n<li>Optimiser les performances des animations pour une meilleure exp\u00e9rience utilisateur<\/li>\n<li>Impl\u00e9menter des animations responsives et accessibles<\/li>\n<li>D\u00e9velopper des composants UI anim\u00e9s modernes et interactifs<\/li>\n<\/ul>\n<div class=\"wpa-accordion wpa-accordion-flush\" id=\"accordion-2-3-les-animations-css-avancees\">\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-2-3-les-animations-css-avancees-item-1\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">01<\/span> Keyframes et animations complexes<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-2-3-les-animations-css-avancees-item-1\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Ma\u00eetrise des @keyframes<\/h4>\n<p>Les @keyframes constituent le c\u0153ur des animations CSS avanc\u00e9es. Elles permettent de d\u00e9finir les \u00e9tapes interm\u00e9diaires d&rsquo;une animation, cr\u00e9ant des transitions fluides entre diff\u00e9rents \u00e9tats. Contrairement aux transitions simples, les keyframes offrent un contr\u00f4le pr\u00e9cis sur chaque moment de l&rsquo;animation, permettant des effets sophistiqu\u00e9s comme des rebonds, des oscillations ou des transformations complexes.<\/p>\n<h4>Propri\u00e9t\u00e9s d&rsquo;animation avanc\u00e9es<\/h4>\n<p>La propri\u00e9t\u00e9 animation-timing-function est cruciale pour cr\u00e9er des mouvements naturels. Les fonctions cubic-bezier permettent de personnaliser l&rsquo;acc\u00e9l\u00e9ration et la d\u00e9c\u00e9l\u00e9ration, tandis que animation-fill-mode contr\u00f4le l&rsquo;\u00e9tat de l&rsquo;\u00e9l\u00e9ment avant et apr\u00e8s l&rsquo;animation. L&rsquo;animation-direction peut inverser ou alterner le cycle, et animation-iteration-count d\u00e9finit le nombre de r\u00e9p\u00e9titions.<\/p>\n<div class=\"info-box\">\n<p><strong>Point cl\u00e9<\/strong> : Utilisez animation-play-state pour contr\u00f4ler dynamiquement la lecture des animations avec JavaScript, cr\u00e9ant des interactions utilisateur avanc\u00e9es.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">\u00c0 retenir<\/h3>\n<p style=\"margin: 0;color: #333\">Les keyframes offrent un contr\u00f4le granulaire sur les animations, permettant de cr\u00e9er des mouvements complexes et naturels gr\u00e2ce aux timing functions personnalis\u00e9es.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercice : Animation de morphing avec keyframes<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">Cr\u00e9ez un loader morphing qui transforme un cercle en carr\u00e9 puis en triangle, avec des timing functions personnalis\u00e9es pour un effet fluide et naturel.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-1\">\n<p class=\"codepen-block-label\">Code de r\u00e9f\u00e9rence :<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"javascript\">JS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copier<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=\"morphing-loader\"&gt;\n  &lt;div class=\"shape\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">.morphing-loader {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 200px;\n  background: radial-gradient(circle, #667eea, #764ba2);\n}\n\n.shape {\n  width: 60px;\n  height: 60px;\n  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);\n  border-radius: 50%;\n  animation: morphing 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;\n  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);\n}\n\n@keyframes morphing {\n  0% {\n    border-radius: 50%;\n    transform: rotate(0deg) scale(1);\n    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);\n  }\n  \n  33% {\n    border-radius: 10%;\n    transform: rotate(180deg) scale(1.2);\n    background: linear-gradient(45deg, #4ecdc4, #45b7d1);\n  }\n  \n  66% {\n    border-radius: 0%;\n    transform: rotate(360deg) scale(0.8);\n    background: linear-gradient(45deg, #45b7d1, #96ceb4);\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n  }\n  \n  100% {\n    border-radius: 50%;\n    transform: rotate(720deg) scale(1);\n    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);\n    clip-path: none;\n  }\n}<\/pre>\n<pre class=\"codepen-code\" data-lang=\"javascript\">\/\/ Contr\u00f4le interactif de l'animation\nconst shape = document.querySelector('.shape');\nlet isPaused = false;\n\nshape.addEventListener('click', () =&gt; {\n  if (isPaused) {\n    shape.style.animationPlayState = 'running';\n  } else {\n    shape.style.animationPlayState = 'paused';\n  }\n  isPaused = !isPaused;\n});<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-1\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"javascript\">JS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Ex\u00e9cuter<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"javascript\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Pr\u00eat<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-2-3-les-animations-css-avancees-item-2\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">02<\/span> Transformations 3D et perspective<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-2-3-les-animations-css-avancees-item-2\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Espace tridimensionnel en CSS<\/h4>\n<p>Les transformations 3D ouvrent une nouvelle dimension aux animations web. La propri\u00e9t\u00e9 perspective d\u00e9finit la distance entre l&rsquo;utilisateur et le plan z=0, cr\u00e9ant un effet de profondeur r\u00e9aliste. Transform-style: preserve-3d maintient la transformation 3D des \u00e9l\u00e9ments enfants, essentielle pour cr\u00e9er des objets complexes comme des cubes ou des cartes retournables.<\/p>\n<h4>Techniques de transformation avanc\u00e9es<\/h4>\n<p>Les fonctions translateZ, rotateX, rotateY et rotateZ permettent de positionner et orienter les \u00e9l\u00e9ments dans l&rsquo;espace 3D. La propri\u00e9t\u00e9 backface-visibility contr\u00f4le la visibilit\u00e9 de la face arri\u00e8re d&rsquo;un \u00e9l\u00e9ment transform\u00e9, cruciale pour les effets de retournement. L&rsquo;utilisation combin\u00e9e de ces propri\u00e9t\u00e9s permet de cr\u00e9er des interfaces immersives et modernes.<\/p>\n<div class=\"info-box\">\n<p><strong>Point cl\u00e9<\/strong> : La perspective doit \u00eatre appliqu\u00e9e sur l&rsquo;\u00e9l\u00e9ment parent pour affecter tous ses enfants, cr\u00e9ant un espace 3D coh\u00e9rent pour l&rsquo;ensemble des animations.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">\u00c0 retenir<\/h3>\n<p style=\"margin: 0;color: #333\">Les transformations 3D n\u00e9cessitent une configuration de perspective appropri\u00e9e et l&rsquo;utilisation de preserve-3d pour maintenir la coh\u00e9rence spatiale des animations complexes.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercice : Card flip 3D avec perspective<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">Construisez une carte interactive qui se retourne en 3D au survol, r\u00e9v\u00e9lant du contenu sur sa face arri\u00e8re avec des effets de perspective r\u00e9alistes.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-2\">\n<p class=\"codepen-block-label\">Code de r\u00e9f\u00e9rence :<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"javascript\">JS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copier<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=\"card-container\"&gt;\n  &lt;div class=\"flip-card\"&gt;\n    &lt;div class=\"flip-card-inner\"&gt;\n      &lt;div class=\"flip-card-front\"&gt;\n        &lt;div class=\"card-content\"&gt;\n          &lt;h3&gt;Frontend Master&lt;\/h3&gt;\n          &lt;div class=\"card-icon\"&gt;\ud83c\udfa8&lt;\/div&gt;\n          &lt;p&gt;Hover to reveal&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=\"flip-card-back\"&gt;\n        &lt;div class=\"card-content\"&gt;\n          &lt;h3&gt;Skills Unlocked&lt;\/h3&gt;\n          &lt;ul&gt;\n            &lt;li&gt;CSS Animations&lt;\/li&gt;\n            &lt;li&gt;3D Transforms&lt;\/li&gt;\n            &lt;li&gt;Modern UI\/UX&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">.card-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 300px;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  perspective: 1000px;\n}\n\n.flip-card {\n  width: 280px;\n  height: 200px;\n  position: relative;\n  cursor: pointer;\n}\n\n.flip-card-inner {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  transform-style: preserve-3d;\n  border-radius: 16px;\n  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);\n}\n\n.flip-card:hover .flip-card-inner {\n  transform: rotateY(180deg);\n}\n\n.flip-card-front, .flip-card-back {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.flip-card-front {\n  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);\n  color: white;\n}\n\n.flip-card-back {\n  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);\n  color: white;\n  transform: rotateY(180deg);\n}\n\n.card-content h3 {\n  margin: 0 0 16px 0;\n  font-size: 24px;\n  font-weight: 700;\n}\n\n.card-icon {\n  font-size: 48px;\n  margin: 16px 0;\n}\n\n.card-content ul {\n  list-style: none;\n  padding: 0;\n  margin: 16px 0;\n}\n\n.card-content li {\n  margin: 8px 0;\n  padding: 8px 16px;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 20px;\n  backdrop-filter: blur(10px);\n}<\/pre>\n<pre class=\"codepen-code\" data-lang=\"javascript\">\/\/ Animation interactive au clic\nconst flipCard = document.querySelector('.flip-card');\nlet isFlipped = false;\n\nflipCard.addEventListener('click', () =&gt; {\n  const inner = flipCard.querySelector('.flip-card-inner');\n  \n  if (isFlipped) {\n    inner.style.transform = 'rotateY(0deg)';\n  } else {\n    inner.style.transform = 'rotateY(180deg)';\n  }\n  \n  isFlipped = !isFlipped;\n});<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-2\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"javascript\">JS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Ex\u00e9cuter<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"javascript\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Pr\u00eat<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-2-3-les-animations-css-avancees-item-3\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">03<\/span> Effets visuels modernes<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-2-3-les-animations-css-avancees-item-3\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Glassmorphism et effets de transparence<\/h4>\n<p>Le glassmorphism repr\u00e9sente une tendance design majeure utilisant backdrop-filter pour cr\u00e9er des effets de verre d\u00e9poli. Cette technique combine transparence, flou d&rsquo;arri\u00e8re-plan et bordures subtiles pour simuler des surfaces vitr\u00e9es. L&rsquo;effet est particuli\u00e8rement efficace sur des arri\u00e8re-plans color\u00e9s ou textur\u00e9s, cr\u00e9ant une profondeur visuelle saisissante.<\/p>\n<h4>Techniques de morphing avanc\u00e9es<\/h4>\n<p>Les propri\u00e9t\u00e9s clip-path et mask permettent de cr\u00e9er des animations de morphing sophistiqu\u00e9es. Clip-path peut transformer des formes g\u00e9om\u00e9triques de mani\u00e8re fluide, tandis que les masques offrent des possibilit\u00e9s cr\u00e9atives infinies. Les blend modes (mix-blend-mode) ajoutent des effets de fusion entre \u00e9l\u00e9ments, cr\u00e9ant des interactions visuelles uniques.<\/p>\n<div class=\"info-box\">\n<p><strong>Point cl\u00e9<\/strong> : Backdrop-filter n\u00e9cessite un fond semi-transparent pour \u00eatre visible et peut impacter les performances sur certains navigateurs plus anciens.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">\u00c0 retenir<\/h3>\n<p style=\"margin: 0;color: #333\">Les effets visuels modernes combinent transparence, filtres et morphing pour cr\u00e9er des interfaces immersives respectant les tendances design contemporaines.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercice : Interface glassmorphism anim\u00e9e<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">Cr\u00e9ez un panneau de contr\u00f4le avec effet glassmorphism, animations de morphing au hover et transitions backdrop-filter fluides.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-3\">\n<p class=\"codepen-block-label\">Code de r\u00e9f\u00e9rence :<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"javascript\">JS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copier<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=\"glass-interface\"&gt;\n  &lt;div class=\"glass-panel\"&gt;\n    &lt;div class=\"panel-header\"&gt;\n      &lt;h3&gt;Control Panel&lt;\/h3&gt;\n      &lt;div class=\"status-dot\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"control-grid\"&gt;\n      &lt;button class=\"glass-button\" data-action=\"power\"&gt;\n        &lt;span class=\"button-icon\"&gt;\u26a1&lt;\/span&gt;\n        &lt;span class=\"button-label\"&gt;Power&lt;\/span&gt;\n      &lt;\/button&gt;\n      &lt;button class=\"glass-button\" data-action=\"settings\"&gt;\n        &lt;span class=\"button-icon\"&gt;\u2699\ufe0f&lt;\/span&gt;\n        &lt;span class=\"button-label\"&gt;Settings&lt;\/span&gt;\n      &lt;\/button&gt;\n      &lt;button class=\"glass-button\" data-action=\"network\"&gt;\n        &lt;span class=\"button-icon\"&gt;\ud83c\udf10&lt;\/span&gt;\n        &lt;span class=\"button-label\"&gt;Network&lt;\/span&gt;\n      &lt;\/button&gt;\n      &lt;button class=\"glass-button\" data-action=\"security\"&gt;\n        &lt;span class=\"button-icon\"&gt;\ud83d\udd12&lt;\/span&gt;\n        &lt;span class=\"button-label\"&gt;Security&lt;\/span&gt;\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">.glass-interface {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 400px;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);\n  position: relative;\n}\n\n.glass-interface::before {\n  content: '';\n  position: absolute;\n  top: 20%;\n  left: 10%;\n  width: 200px;\n  height: 200px;\n  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);\n  border-radius: 50%;\n  filter: blur(40px);\n  animation: float 6s ease-in-out infinite;\n}\n\n.glass-panel {\n  backdrop-filter: blur(16px) saturate(180%);\n  background: rgba(255, 255, 255, 0.12);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  border-radius: 24px;\n  padding: 32px;\n  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);\n  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n  min-width: 320px;\n}\n\n.glass-panel:hover {\n  backdrop-filter: blur(20px) saturate(200%);\n  background: rgba(255, 255, 255, 0.18);\n  transform: translateY(-8px);\n  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15);\n}\n\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 24px;\n}\n\n.panel-header h3 {\n  margin: 0;\n  color: white;\n  font-size: 24px;\n  font-weight: 600;\n}\n\n.status-dot {\n  width: 12px;\n  height: 12px;\n  background: #4ade80;\n  border-radius: 50%;\n  animation: pulse 2s infinite;\n  box-shadow: 0 0 16px #4ade80;\n}\n\n.control-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.glass-button {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 16px;\n  padding: 20px;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n  backdrop-filter: blur(8px);\n  color: white;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n\n.glass-button:hover {\n  background: rgba(255, 255, 255, 0.2);\n  backdrop-filter: blur(12px);\n  transform: scale(1.05) translateY(-2px);\n  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);\n}\n\n.glass-button:active {\n  transform: scale(0.95);\n}\n\n.button-icon {\n  font-size: 24px;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));\n}\n\n.button-label {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n@keyframes float {\n  0%, 100% { transform: translate(0, 0) rotate(0deg); }\n  33% { transform: translate(30px, -30px) rotate(120deg); }\n  66% { transform: translate(-20px, 20px) rotate(240deg); }\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.7; transform: scale(1.1); }\n}<\/pre>\n<pre class=\"codepen-code\" data-lang=\"javascript\">\/\/ Interactions avanc\u00e9es avec \u00e9tats\nconst glassButtons = document.querySelectorAll('.glass-button');\nconst statusDot = document.querySelector('.status-dot');\n\nglassButtons.forEach(button =&gt; {\n  button.addEventListener('click', (e) =&gt; {\n    const action = e.currentTarget.dataset.action;\n    \n    \/\/ Animation de feedback\n    button.style.background = 'rgba(255, 255, 255, 0.3)';\n    button.style.transform = 'scale(0.9)';\n    \n    setTimeout(() =&gt; {\n      button.style.background = '';\n      button.style.transform = '';\n    }, 200);\n    \n    \/\/ Changement de statut\n    statusDot.style.background = '#f59e0b';\n    setTimeout(() =&gt; {\n      statusDot.style.background = '#4ade80';\n    }, 1000);\n    \n    console.log(`Action triggered: ${action}`);\n  });\n});<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-3\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"javascript\">JS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Ex\u00e9cuter<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"javascript\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Pr\u00eat<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-2-3-les-animations-css-avancees-item-4\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">04<\/span> Performance et optimisation<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-2-3-les-animations-css-avancees-item-4\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Optimisation des performances d&rsquo;animation<\/h4>\n<p>Les animations CSS peuvent impacter significativement les performances si elles ne sont pas optimis\u00e9es correctement. Les propri\u00e9t\u00e9s qui d\u00e9clenchent le reflow (largeur, hauteur, position) sont co\u00fbteuses et doivent \u00eatre \u00e9vit\u00e9es au profit de transform et opacity qui ne n\u00e9cessitent que la phase de composite. L&rsquo;utilisation de will-change informe le navigateur des \u00e9l\u00e9ments qui vont \u00eatre anim\u00e9s, permettant une pr\u00e9paration en amont.<\/p>\n<h4>GPU et acc\u00e9l\u00e9ration mat\u00e9rielle<\/h4>\n<p>L&rsquo;acc\u00e9l\u00e9ration GPU peut \u00eatre forc\u00e9e avec transform: translateZ(0) ou will-change, d\u00e9pla\u00e7ant le rendu vers le processeur graphique pour des animations plus fluides. Cependant, cette technique doit \u00eatre utilis\u00e9e judicieusement car elle consomme de la m\u00e9moire vid\u00e9o. La r\u00e8gle des 60 FPS impose de maintenir chaque frame sous 16.67ms, n\u00e9cessitant une surveillance via les outils de d\u00e9veloppement.<\/p>\n<div class=\"info-box\">\n<p><strong>Point cl\u00e9<\/strong> : Privil\u00e9giez toujours transform et opacity pour les animations, car ces propri\u00e9t\u00e9s \u00e9vitent le reflow et le repaint, utilisant uniquement la couche composite du navigateur.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">\u00c0 retenir<\/h3>\n<p style=\"margin: 0;color: #333\">L&rsquo;optimisation des animations repose sur l&rsquo;utilisation de propri\u00e9t\u00e9s composites (transform, opacity) et une gestion intelligente de l&rsquo;acc\u00e9l\u00e9ration GPU via will-change.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercice : Syst\u00e8me de particules optimis\u00e9<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">D\u00e9veloppez un syst\u00e8me de particules flottantes utilisant uniquement transform et opacity, avec will-change pour l&rsquo;optimisation GPU et des performances 60fps.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-4\">\n<p class=\"codepen-block-label\">Code de r\u00e9f\u00e9rence :<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"javascript\">JS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copier<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=\"particle-system\"&gt;\n  &lt;div class=\"performance-monitor\"&gt;\n    &lt;span class=\"fps-counter\"&gt;FPS: 60&lt;\/span&gt;\n    &lt;button class=\"toggle-particles\"&gt;Toggle Animation&lt;\/button&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"particles-container\"&gt;\n    &lt;div class=\"particle\" style=\"--delay: 0s; --duration: 4s; --x: 10%; --y: 20%;\"&gt;&lt;\/div&gt;\n    &lt;div class=\"particle\" style=\"--delay: 0.5s; --duration: 5s; --x: 30%; --y: 80%;\"&gt;&lt;\/div&gt;\n    &lt;div class=\"particle\" style=\"--delay: 1s; --duration: 3.5s; --x: 60%; --y: 40%;\"&gt;&lt;\/div&gt;\n    &lt;div class=\"particle\" style=\"--delay: 1.5s; --duration: 4.5s; --x: 80%; --y: 60%;\"&gt;&lt;\/div&gt;\n    &lt;div class=\"particle\" style=\"--delay: 2s; --duration: 3s; --x: 20%; --y: 90%;\"&gt;&lt;\/div&gt;\n    &lt;div class=\"particle\" style=\"--delay: 2.5s; --duration: 4s; --x: 70%; --y: 10%;\"&gt;&lt;\/div&gt;\n    &lt;div class=\"particle\" style=\"--delay: 3s; --duration: 5.5s; --x: 40%; --y: 70%;\"&gt;&lt;\/div&gt;\n    &lt;div class=\"particle\" style=\"--delay: 3.5s; --duration: 3.5s; --x: 90%; --y: 30%;\"&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">.particle-system {\n  position: relative;\n  width: 100%;\n  height: 400px;\n  background: radial-gradient(ellipse at center, #1e3c72 0%, #2a5298 50%, #000 100%);\n  overflow: hidden;\n  border-radius: 12px;\n}\n\n.performance-monitor {\n  position: absolute;\n  top: 16px;\n  left: 16px;\n  z-index: 10;\n  display: flex;\n  gap: 12px;\n  align-items: center;\n}\n\n.fps-counter {\n  background: rgba(0, 0, 0, 0.7);\n  color: #4ade80;\n  padding: 8px 12px;\n  border-radius: 20px;\n  font-family: monospace;\n  font-size: 12px;\n  backdrop-filter: blur(4px);\n}\n\n.toggle-particles {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  color: white;\n  padding: 8px 16px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 12px;\n  backdrop-filter: blur(4px);\n  transition: background 0.3s ease;\n}\n\n.toggle-particles:hover {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.particles-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.particle {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background: radial-gradient(circle, #4ade80, #22d3ee);\n  border-radius: 50%;\n  left: var(--x);\n  top: var(--y);\n  \n  \/* Optimisation GPU critique *\/\n  will-change: transform, opacity;\n  transform: translateZ(0);\n  \n  \/* Animation utilisant uniquement les propri\u00e9t\u00e9s composites *\/\n  animation: \n    particleFloat var(--duration) ease-in-out var(--delay) infinite,\n    particleFade var(--duration) ease-in-out var(--delay) infinite;\n  \n  box-shadow: \n    0 0 16px currentColor,\n    0 0 32px rgba(34, 211, 238, 0.3);\n}\n\n.particle::before {\n  content: '';\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  right: -2px;\n  bottom: -2px;\n  background: inherit;\n  border-radius: 50%;\n  opacity: 0.3;\n  filter: blur(4px);\n  will-change: transform;\n  transform: translateZ(0);\n}\n\n\/* Animations optimis\u00e9es - uniquement transform et opacity *\/\n@keyframes particleFloat {\n  0% {\n    transform: translateZ(0) translate(0, 0) scale(1) rotate(0deg);\n    opacity: 0;\n  }\n  \n  10% {\n    opacity: 1;\n  }\n  \n  25% {\n    transform: translateZ(0) translate(20px, -30px) scale(1.2) rotate(90deg);\n  }\n  \n  50% {\n    transform: translateZ(0) translate(-15px, -60px) scale(0.8) rotate(180deg);\n  }\n  \n  75% {\n    transform: translateZ(0) translate(25px, -90px) scale(1.1) rotate(270deg);\n  }\n  \n  90% {\n    opacity: 1;\n  }\n  \n  100% {\n    transform: translateZ(0) translate(-10px, -120px) scale(0.5) rotate(360deg);\n    opacity: 0;\n  }\n}\n\n@keyframes particleFade {\n  0%, 100% { opacity: 0; }\n  50% { opacity: 1; }\n}\n\n\/* \u00c9tat paused pour le contr\u00f4le des performances *\/\n.particles-container.paused .particle {\n  animation-play-state: paused;\n}<\/pre>\n<pre class=\"codepen-code\" data-lang=\"javascript\">\/\/ Syst\u00e8me de monitoring de performance\nclass PerformanceMonitor {\n  constructor() {\n    this.fps = 0;\n    this.lastTime = performance.now();\n    this.frameCount = 0;\n    this.fpsDisplay = document.querySelector('.fps-counter');\n    this.isRunning = true;\n    \n    this.measureFPS();\n  }\n  \n  measureFPS() {\n    const currentTime = performance.now();\n    this.frameCount++;\n    \n    if (currentTime - this.lastTime &gt;= 1000) {\n      this.fps = Math.round((this.frameCount * 1000) \/ (currentTime - this.lastTime));\n      this.updateDisplay();\n      \n      this.frameCount = 0;\n      this.lastTime = currentTime;\n    }\n    \n    if (this.isRunning) {\n      requestAnimationFrame(() =&gt; this.measureFPS());\n    }\n  }\n  \n  updateDisplay() {\n    const color = this.fps &gt;= 55 ? '#4ade80' : this.fps &gt;= 30 ? '#f59e0b' : '#ef4444';\n    this.fpsDisplay.textContent = `FPS: ${this.fps}`;\n    this.fpsDisplay.style.color = color;\n  }\n  \n  stop() {\n    this.isRunning = false;\n  }\n}\n\n\/\/ Contr\u00f4le des animations\nconst particlesContainer = document.querySelector('.particles-container');\nconst toggleButton = document.querySelector('.toggle-particles');\nconst monitor = new PerformanceMonitor();\n\nlet isAnimating = true;\n\ntoggleButton.addEventListener('click', () =&gt; {\n  isAnimating = !isAnimating;\n  \n  if (isAnimating) {\n    particlesContainer.classList.remove('paused');\n    toggleButton.textContent = 'Pause Animation';\n  } else {\n    particlesContainer.classList.add('paused');\n    toggleButton.textContent = 'Resume Animation';\n  }\n});<\/pre>\n<\/div>\n<\/div>\n<div class=\"monaco-sandbox\" data-block-id=\"exercise-4\">\n<div class=\"monaco-header\">\n<div class=\"monaco-tabs\">\n<button class=\"monaco-tab active\" data-lang=\"html\">HTML<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"css\">CSS<\/button><br \/>\n<button class=\"monaco-tab\" data-lang=\"javascript\">JS<\/button>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Ex\u00e9cuter<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button>\n<\/div>\n<\/div>\n<div class=\"monaco-container\">\n<div class=\"monaco-editor-wrapper\">\n<div class=\"monaco-editor-pane active\" data-lang=\"html\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"css\"><\/div>\n<div class=\"monaco-editor-pane\" data-lang=\"javascript\"><\/div>\n<\/div>\n<div class=\"monaco-preview-wrapper\">\n<div class=\"monaco-preview-header\">Result<\/div>\n<\/div>\n<\/div>\n<div class=\"monaco-status\">\n<span class=\"monaco-status-left\">\u25cf Pr\u00eat<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-2-3-les-animations-css-avancees-item-5\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">05<\/span> Accessibilit\u00e9 et responsive design<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-2-3-les-animations-css-avancees-item-5\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Respect des pr\u00e9f\u00e9rences utilisateur<\/h4>\n<p>L&rsquo;accessibilit\u00e9 des animations est cruciale pour une exp\u00e9rience inclusive. La media query prefers-reduced-motion d\u00e9tecte si l&rsquo;utilisateur a d\u00e9sactiv\u00e9 les animations dans ses pr\u00e9f\u00e9rences syst\u00e8me. Cette directive doit \u00eatre respect\u00e9e en r\u00e9duisant ou supprimant les mouvements pour les personnes sensibles aux animations ou souffrant de troubles vestibulaires.<\/p>\n<h4>Animations responsives et adaptatives<\/h4>\n<p>Les animations doivent s&rsquo;adapter aux diff\u00e9rentes tailles d&rsquo;\u00e9cran et capacit\u00e9s des appareils. Sur mobile, les animations complexes peuvent \u00eatre simplifi\u00e9es pour pr\u00e9server la batterie et assurer la fluidit\u00e9. L&rsquo;utilisation de media queries sp\u00e9cifiques permet d&rsquo;ajuster la dur\u00e9e, l&rsquo;intensit\u00e9 ou m\u00eame de d\u00e9sactiver certaines animations sur les appareils moins performants.<\/p>\n<div class=\"info-box\">\n<p><strong>Point cl\u00e9<\/strong> : Toujours impl\u00e9menter prefers-reduced-motion pour offrir une alternative statique ou r\u00e9duite aux utilisateurs qui en ont besoin, respectant ainsi les standards d&rsquo;accessibilit\u00e9.<\/p>\n<\/div>\n<div class=\"tuto-objectif\" style=\"background: #f5f5f5;border-left: 4px solid #667eea;padding: 16px 20px;margin-top: 24px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #667eea;margin: 0 0 8px 0;font-size: 16px\">\u00c0 retenir<\/h3>\n<p style=\"margin: 0;color: #333\">L&rsquo;accessibilit\u00e9 des animations n\u00e9cessite le respect de prefers-reduced-motion et l&rsquo;adaptation responsive pour garantir une exp\u00e9rience inclusive sur tous les appareils.<\/p>\n<\/div>\n<div class=\"tuto-exercise\" style=\"background: #fff3e0;border-left: 4px solid #ff9800;padding: 16px 20px;margin-top: 20px;border-radius: 0 8px 8px 0\">\n<h4 style=\"color: #ff9800;margin: 0 0 8px 0;font-size: 15px\">\ud83c\udfaf Mini-exercice : Interface adaptative et accessible<\/h4>\n<p style=\"margin: 0;color: #333;font-size: 14px\">Construisez un menu de navigation avec animations respectant prefers-reduced-motion, responsive design et indicateurs d&rsquo;\u00e9tat accessibles.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-5\">\n<p class=\"codepen-block-label\">Code de r\u00e9f\u00e9rence :<\/p>\n<div class=\"codepen-header\">\n<div class=\"codepen-tabs\">\n<button class=\"codepen-tab active\" data-tab=\"html\">HTML<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"css\">CSS<\/button><br \/>\n<button class=\"codepen-tab\" data-tab=\"javascript\">JS<\/button>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copier<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;nav class=\"accessible-nav\" role=\"navigation\" aria-label=\"Menu principal\"&gt;\n  &lt;div class=\"nav-brand\"&gt;\n    &lt;h1&gt;AccessNav&lt;\/h1&gt;\n  &lt;\/div&gt;\n  \n  &lt;button class=\"nav-toggle\" aria-expanded=\"false\" aria-controls=\"nav-menu\" aria-label=\"Ouvrir le menu de navigation\"&gt;\n    &lt;span class=\"hamburger\"&gt;\n      &lt;span class=\"hamburger-line\"&gt;&lt;\/span&gt;\n      &lt;span class=\"hamburger-line\"&gt;&lt;\/span&gt;\n      &lt;span class=\"hamburger-line\"&gt;&lt;\/span&gt;\n    &lt;\/span&gt;\n    &lt;span class=\"sr-only\"&gt;Menu&lt;\/span&gt;\n  &lt;\/button&gt;\n  \n  &lt;ul class=\"nav-menu\" id=\"nav-menu\" role=\"menubar\"&gt;\n    &lt;li class=\"nav-item\" role=\"none\"&gt;\n      &lt;a href=\"#home\" class=\"nav-link\" role=\"menuitem\" aria-current=\"page\"&gt;\n        &lt;span class=\"nav-icon\" aria-hidden=\"true\"&gt;\ud83c\udfe0&lt;\/span&gt;\n        &lt;span class=\"nav-text\"&gt;Accueil&lt;\/span&gt;\n      &lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"nav-item\" role=\"none\"&gt;\n      &lt;a href=\"#about\" class=\"nav-link\" role=\"menuitem\"&gt;\n        &lt;span class=\"nav-icon\" aria-hidden=\"true\"&gt;\ud83d\udc64&lt;\/span&gt;\n        &lt;span class=\"nav-text\"&gt;\u00c0 propos&lt;\/span&gt;\n      &lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"nav-item\" role=\"none\"&gt;\n      &lt;a href=\"#services\" class=\"nav-link\" role=\"menuitem\"&gt;\n        &lt;span class=\"nav-icon\" aria-hidden=\"true\"&gt;\u2699\ufe0f&lt;\/span&gt;\n        &lt;span class=\"nav-text\"&gt;Services&lt;\/span&gt;\n      &lt;\/a&gt;\n    &lt;\/li&gt;\n    &lt;li class=\"nav-item\" role=\"none\"&gt;\n      &lt;a href=\"#contact\" class=\"nav-link\" role=\"menuitem\"&gt;\n        &lt;span class=\"nav-icon\" aria-hidden=\"true\"&gt;\ud83d\udce7&lt;\/span&gt;\n        &lt;span class=\"nav-text\"&gt;Contact&lt;\/span&gt;\n      &lt;\/a&gt;\n    &lt;\/li&gt;\n  &lt;\/ul&gt;\n  \n  &lt;div class=\"accessibility-settings\"&gt;\n    &lt;button class=\"a11y-toggle\" aria-label=\"R\u00e9duire les animations\" title=\"R\u00e9duire les animations\"&gt;\n      &lt;span class=\"a11y-icon\"&gt;\ud83c\udfad&lt;\/span&gt;\n    &lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;\n\n&lt;main class=\"content-area\"&gt;\n  &lt;p&gt;Contenu principal de la page...&lt;\/p&gt;\n&lt;\/main&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">\/* Utilitaire d'accessibilit\u00e9 *\/\n.sr-only {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.accessible-nav {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 24px;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  position: relative;\n  z-index: 1000;\n}\n\n.nav-brand h1 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 700;\n}\n\n.nav-toggle {\n  display: none;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 8px;\n  color: white;\n  position: relative;\n  z-index: 1001;\n}\n\n.hamburger {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.hamburger-line {\n  width: 24px;\n  height: 3px;\n  background: currentColor;\n  border-radius: 2px;\n  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n\/* \u00c9tats du hamburger *\/\n.nav-toggle[aria-expanded=\"true\"] .hamburger-line:nth-child(1) {\n  transform: rotate(45deg) translate(5px, 5px);\n}\n\n.nav-toggle[aria-expanded=\"true\"] .hamburger-line:nth-child(2) {\n  opacity: 0;\n}\n\n.nav-toggle[aria-expanded=\"true\"] .hamburger-line:nth-child(3) {\n  transform: rotate(-45deg) translate(7px, -6px);\n}\n\n.nav-menu {\n  display: flex;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  gap: 8px;\n}\n\n.nav-link {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 20px;\n  color: white;\n  text-decoration: none;\n  border-radius: 12px;\n  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n  position: relative;\n  background: rgba(255, 255, 255, 0.1);\n  backdrop-filter: blur(8px);\n}\n\n.nav-link::before {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  width: 0;\n  height: 3px;\n  background: white;\n  border-radius: 2px;\n  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);\n  transform: translateX(-50%);\n}\n\n.nav-link:hover,\n.nav-link:focus {\n  background: rgba(255, 255, 255, 0.2);\n  transform: translateY(-2px);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n}\n\n.nav-link:hover::before,\n.nav-link:focus::before,\n.nav-link[aria-current=\"page\"]::before {\n  width: 80%;\n}\n\n.nav-link[aria-current=\"page\"] {\n  background: rgba(255, 255, 255, 0.25);\n  font-weight: 600;\n}\n\n.accessibility-settings {\n  display: flex;\n  align-items: center;\n}\n\n.a11y-toggle {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.3);\n  color: white;\n  padding: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  backdrop-filter: blur(4px);\n}\n\n.a11y-toggle:hover {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.content-area {\n  padding: 40px 24px;\n  color: #333;\n}\n\n\/* Responsive design *\/\n@media (max-width: 768px) {\n  .nav-toggle {\n    display: block;\n  }\n  \n  .nav-menu {\n    position: fixed;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100vh;\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 24px;\n    transition: left 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n    backdrop-filter: blur(16px);\n  }\n  \n  .nav-menu.is-open {\n    left: 0;\n  }\n  \n  .nav-link {\n    font-size: 18px;\n    padding: 16px 24px;\n    min-width: 200px;\n    justify-content: center;\n  }\n  \n  .accessibility-settings {\n    position: fixed;\n    top: 20px;\n    right: 80px;\n    z-index: 1002;\n  }\n}\n\n\/* Respect des pr\u00e9f\u00e9rences d'accessibilit\u00e9 *\/\n@media (prefers-reduced-motion: reduce) {\n  .hamburger-line,\n  .nav-link,\n  .nav-link::before,\n  .nav-menu,\n  .a11y-toggle {\n    transition: none !important;\n    animation: none !important;\n  }\n  \n  .nav-link:hover,\n  .nav-link:focus {\n    transform: none !important;\n  }\n  \n  \/* Indicateurs statiques pour les utilisateurs avec animations r\u00e9duites *\/\n  .nav-link[aria-current=\"page\"] {\n    border-left: 4px solid white;\n    border-radius: 0 12px 12px 0;\n  }\n}\n\n\/* Mode sombre et contraste \u00e9lev\u00e9 *\/\n@media (prefers-contrast: high) {\n  .accessible-nav {\n    background: #000;\n    border-bottom: 2px solid #fff;\n  }\n  \n  .nav-link {\n    background: none;\n    border: 2px solid transparent;\n  }\n  \n  .nav-link:hover,\n  .nav-link:focus,\n  .nav-link[aria-current=\"page\"] {\n    border-color: white;\n    background: rgba(255, 255, 255, 0.1);\n  }\n}<\/pre>\n<pre class=\"codepen-code\" data-lang=\"javascript\">\/\/ Gestion accessible du menu mobile\nclass AccessibleNavigation {\n  constructor() {\n    this.navToggle = document.querySelector('.nav-toggle');\n    this.navMenu = document.querySelector('.nav-menu');\n    this.navLinks = document.querySelectorAll('.nav-link');\n    this.a11yToggle = document.querySelector('.a11y-toggle');\n    this.isOpen = false;\n    this.reducedMotion = false;\n    \n    this.initEventListeners();\n    this.checkReducedMotionPreference();\n  }\n  \n  initEventListeners() {\n    \/\/ Toggle menu mobile\n    this.navToggle.addEventListener('click', (e) =&gt; {\n      e.preventDefault();\n      this.toggleMenu();\n    });\n    \n    \/\/ Fermer menu avec Escape\n    document.addEventListener('keydown', (e) =&gt; {\n      if (e.key === 'Escape' &amp;&amp; this.isOpen) {\n        this.closeMenu();\n      }\n    });\n    \n    \/\/ Navigation au clavier\n    this.navLinks.forEach((link, index) =&gt; {\n      link.addEventListener('keydown', (e) =&gt; {\n        this.handleKeyNavigation(e, index);\n      });\n      \n      \/\/ Mise \u00e0 jour aria-current\n      link.addEventListener('click', (e) =&gt; {\n        this.updateCurrentPage(e.target);\n      });\n    });\n    \n    \/\/ Toggle animations\n    this.a11yToggle.addEventListener('click', () =&gt; {\n      this.toggleReducedMotion();\n    });\n    \n    \/\/ Fermer menu mobile si redimensionnement\n    window.addEventListener('resize', () =&gt; {\n      if (window.innerWidth &gt; 768 &amp;&amp; this.isOpen) {\n        this.closeMenu();\n      }\n    });\n  }\n  \n  toggleMenu() {\n    this.isOpen = !this.isOpen;\n    \n    this.navToggle.setAttribute('aria-expanded', this.isOpen);\n    this.navToggle.setAttribute('aria-label', \n      this.isOpen ? 'Fermer le menu de navigation' : 'Ouvrir le menu de navigation'\n    );\n    \n    if (this.isOpen) {\n      this.navMenu.classList.add('is-open');\n      \/\/ Focus sur le premier lien\n      this.navLinks[0].focus();\n      \/\/ Emp\u00eacher le scroll du body\n      document.body.style.overflow = 'hidden';\n    } else {\n      this.navMenu.classList.remove('is-open');\n      \/\/ Restaurer le scroll\n      document.body.style.overflow = '';\n      \/\/ Retour focus sur le toggle\n      this.navToggle.focus();\n    }\n  }\n  \n  closeMenu() {\n    this.isOpen = false;\n    this.navToggle.setAttribute('aria-expanded', 'false');\n    this.navToggle.setAttribute('aria-label', 'Ouvrir le menu de navigation');\n    this.navMenu.classList.remove('is-open');\n    document.body.style.overflow = '';\n    this.navToggle.focus();\n  }\n  \n  handleKeyNavigation(e, currentIndex) {\n    let targetIndex;\n    \n    switch (e.key) {\n      case 'ArrowDown':\n      case 'Arrow<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>R\u00e9capitulatif<\/h2>\n<div class=\"tuto-recap\" style=\"background: #f5f5f5;border-left: 4px solid #9c27b0;padding: 16px 20px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #9c27b0;margin: 0 0 12px 0;font-size: 16px\">Points essentiels \u00e0 retenir<\/h3>\n<ul style=\"margin: 0;padding-left: 20px;color: #333\">\n<li><strong>Propri\u00e9t\u00e9s CSS modernes<\/strong> : Flexbox, Grid et les variables CSS permettent des mises en page flexibles et maintenables.<\/li>\n<li><strong>Responsive Design<\/strong> : Les media queries et les unit\u00e9s relatives garantissent l&rsquo;adaptation \u00e0 tous les \u00e9crans.<\/li>\n<li><strong>Animations CSS<\/strong> : Les @keyframes et transitions cr\u00e9ent des effets visuels fluides et engageants.<\/li>\n<li><strong>Performance<\/strong> : Privil\u00e9gier transform et opacity pour des animations performantes \u00e0 60fps.<\/li>\n<li><strong>Accessibilit\u00e9<\/strong> : Respecter prefers-reduced-motion pour les utilisateurs sensibles aux mouvements.<\/li>\n<\/ul>\n<\/div>\n<h2>Sources<\/h2>\n<div class=\"sources-box\" style=\"background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);border: 1px solid #cbd5e1;border-radius: 12px;padding: 16px;margin-bottom: 24px\">\n<p style=\"color: #64748b;margin: 0 0 12px 0;font-size: 13px\">Pour approfondir vos connaissances :<\/p>\n<ul style=\"margin: 0;padding-left: 0\">\n<li style=\"margin-bottom: 8px\"><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_animations\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"align-items: center;gap: 10px;padding: 10px 14px;background: white;border-radius: 8px;text-decoration: none;color: #1e293b;border: 1px solid #e2e8f0\"><span style=\"color: #94a3b8\">\ud83d\udd17<\/span><span style=\"flex: 1;font-weight: 500;color: #0f172a\">MDN &#8211; Animations CSS et keyframes<\/span><span style=\"color: #94a3b8\">\u2192<\/span><\/a><\/li>\n<li style=\"margin-bottom: 0\"><a href=\"https:\/\/css-tricks.com\/css-animation-tricks\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"align-items: center;gap: 10px;padding: 10px 14px;background: white;border-radius: 8px;text-decoration: none;color: #1e293b;border: 1px solid #e2e8f0\"><span style=\"color: #94a3b8\">\ud83d\udd17<\/span><span style=\"flex: 1;font-weight: 500;color: #0f172a\">CSS-Tricks &#8211; Trucs et astuces d&rsquo;animation<\/span><span style=\"color: #94a3b8\">\u2192<\/span><\/a><\/li>\n<\/ul>\n<\/div>\n<h2>Validez vos connaissances<\/h2>\n<p>Testez votre compr\u00e9hension avec ce quiz de 10 questions :<\/p>\n<div id=\"quiz-block-1\" class=\"quiz-container\" data-quiz-json=\"https:\/\/lmspro.fr\/wp-content\/plugins\/generate-article-endpoint\/quiz-data\/en\/quiz-2-3-les-animations-css-avancees.json\" aria-label=\"Interactive Quiz\"><div class=\"quiz-loading\" role=\"status\" aria-live=\"polite\"><span class=\"quiz-sr-only\">Loading quiz...<\/span><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>2.3 Advanced CSS Animations Dive into the fascinating world of advanced CSS animations and discover how to create captivating and interactive user experiences. Master modern animation techniques to bring your web interfaces to life with fluidity and elegance. Module: Module 1: Web Technical Fundamentals Level: Intermediate Duration: 30 minutes\u2026 <a href=\"https:\/\/lmspro.fr\/en\/les-animations-css-avancees-part1\/\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> \u00ab\u00a0Les Animations CSS Avanc\u00e9es Part 1\u00a0\u00bb<\/span> &raquo;<\/a><\/p>","protected":false},"author":1,"featured_media":554,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89,30],"tags":[34,25,26,132,27,28,133,2],"class_list":["post-556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-modele-de-boite-css","category-module-1-fondamentaux-techniques-du-web","tag-accessibilite","tag-animation","tag-css","tag-fondamentaux-web","tag-html","tag-javascript","tag-js","tag-ux"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/comments?post=556"}],"version-history":[{"count":5,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/556\/revisions"}],"predecessor-version":[{"id":635,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/556\/revisions\/635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/554"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}