{"id":417,"date":"2026-01-22T11:26:28","date_gmt":"2026-01-22T10:26:28","guid":{"rendered":"https:\/\/lmspro.fr\/css-mise-en-forme-animations-transitions\/"},"modified":"2026-02-14T13:42:19","modified_gmt":"2026-02-14T12:42:19","slug":"css-mise-en-forme-animations-transitions","status":"publish","type":"post","link":"https:\/\/lmspro.fr\/en\/css-mise-en-forme-animations-transitions\/","title":{"rendered":"CSS Formatting \u2014 Animations, Transitions"},"content":{"rendered":"<h2>CSS Formatting \u2014 Animations, Transitions<\/h2>\n<p class=\"wpa-text\">Discover the art of bringing your web interfaces to life with CSS animations and transitions! This lesson will teach you how to create engaging visual effects that will enhance the user experience of your websites.<\/p>\n<div class=\"article-meta\">\n<p><strong>Module:<\/strong> Module 1: Technical Fundamentals of the Web<\/p>\n<p><strong>Level :<\/strong> Beginner<\/p>\n<p><strong>Duration :<\/strong> 20 minutes<\/p>\n<p><strong>Prerequisites:<\/strong> None<\/p>\n<\/div>\n<h2>Educational objectives<\/h2>\n<ul>\n<li>Mastering CSS transitions to create smooth effects<\/li>\n<li>Understanding CSS animation properties and their use<\/li>\n<li>Create custom animations with @keyframes<\/li>\n<li>Optimize the performance of web animations<\/li>\n<li>Applying UX best practices to animations<\/li>\n<\/ul>\n<div class=\"wpa-accordion wpa-accordion-flush\" id=\"accordion-css-mise-en-forme-animations-transitions\">\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-css-mise-en-forme-animations-transitions-item-1\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">01<\/span> Introduction to CSS Transitions<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-css-mise-en-forme-animations-transitions-item-1\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>What is a CSS transition?<\/h4>\n<p>CSS transitions allow you to create gradual changes between two states of an element. Instead of an instantaneous, abrupt change, the transition creates a smooth interpolation between the initial and final values of a property. This technique significantly improves the user experience by making interfaces more natural and pleasant to use.<\/p>\n<h4>The transition property<\/h4>\n<p>The `transition` property is a shorthand that combines four sub-properties: `transition-property` (which property to animate), `transition-duration` (duration), `transition-timing-function` (animation curve), and `transition-delay` (delay before starting). For example, `transition: color 0.3s ease-in-out 0.1s` will animate the color for 0.3 seconds with an ease-in-out curve after a 0.1-second delay.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> Transitions are only activated during a state change, such as :hover, :focus, or via JavaScript.<\/p>\n<\/div>\n<div class=\"highlight-box\">\n<p><strong>Best practices<\/strong> Use durations between 200ms and 500ms for micro-interactions, and prefer transitions on transform and opacity for better performance.<\/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\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">CSS transitions create gradual changes between element states, improving UX through smooth and natural effects.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-css-mise-en-forme-animations-transitions-item-2\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">02<\/span> The timing functions<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-css-mise-en-forme-animations-transitions-item-2\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Understanding animation curves<\/h4>\n<p>Timing functions define how an animation progresses over time. CSS offers several predefined values: linear (constant speed), ease (slow start, speed up, then slow down), ease-in (slow start), ease-out (slow end), and ease-in-out (slow start and slow end). Each function creates a different feel and influences the perceived smoothness.<\/p>\n<h4>Custom cubic-bezier functions<\/h4>\n<p>For precise control, you can use `cubic-bezier()` with four values defining the control points of a B\u00e9zier curve. For example, `cubic-bezier(0.68, -0.55, 0.265, 1.55)` creates a bouncing effect. Online tools like cubic-bezier.com make it easy to visualize and create these curves. Custom curves give your animations a unique identity.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> The `steps()` function allows you to create step-by-step animations, ideal for typewriter effects or sprites.<\/p>\n<\/div>\n<div class=\"highlight-box\">\n<p><strong>Material Design<\/strong> Google recommends curves like cubic-bezier(0.4, 0.0, 0.2, 1) for a natural and consistent feel<\/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\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">Timing functions control the progression of animations and directly influence the perception of naturalness and fluidity.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-css-mise-en-forme-animations-transitions-item-3\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">03<\/span> Animations with @keyframes<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-css-mise-en-forme-animations-transitions-item-3\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Create custom animations<\/h4>\n<p>@keyframes allow you to define complex animations with multiple steps. Unlike transitions, which require a trigger, animations can start automatically. You define keyframes using percentages (0% to 100%) or the keywords &quot;from&quot; and &quot;to&quot;. Each step can modify different CSS properties, creating sophisticated animation sequences.<\/p>\n<h4>Animation properties<\/h4>\n<p>The animation property combines several sub-properties: animation-name (animation name @keyframes), animation-duration (duration), animation-timing-function (curve), animation-delay (delay), animation-iteration-count (number of repetitions), animation-direction (playback direction), animation-fill-mode (before\/after state), and animation-play-state (play\/pause). These properties provide complete control over the animation&#039;s behavior.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> animation-fill-mode: forwards maintains the final state of the animation, backwards applies the initial state during the delay<\/p>\n<\/div>\n<div class=\"highlight-box\">\n<p><strong>Performance<\/strong> Preferably animate transform and opacity properties that trigger GPU compositing, rather than layout properties like width or height.<\/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\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">@keyframes create complex multi-step animations with precise control over each phase of the animation.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-css-mise-en-forme-animations-transitions-item-4\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">04<\/span> Transform: the foundation of fluid animations<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-css-mise-en-forme-animations-transitions-item-4\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>2D and 3D transformations<\/h4>\n<p>The transform property is essential for creating effective animations. It allows you to modify the geometry of elements without affecting the document flow. 2D transformations include translate() (move), rotate() (rotate), scale() (resize), and skew() (skew). 3D transformations add translateZ(), rotateX(), rotateY(), and perspective(), opening up new creative possibilities.<\/p>\n<h4>Transform-origin and performance<\/h4>\n<p>The `transform-origin` property defines the reference point for transformations. By default, it&#039;s centered (50% 50%), but it can be modified to create specific effects, such as rotations around a corner. Transformations utilize the GPU&#039;s composition layer, resulting in high performance. Combining multiple transformations in a single declaration (`transform: translateX(100px) rotate(45deg)`) further optimizes performance.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> :will-change: transform notifies the browser that a property is going to be animated, optimizing performance<\/p>\n<\/div>\n<div class=\"highlight-box\">\n<p><strong>3D Tip<\/strong> Use `transform-style: preserve-3d` on the container to maintain the depth of the transformed child elements.<\/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\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">Transform offers powerful geometric transformations essential for creating smooth and optimized animations.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"wpa-accordion-item\">\n<button class=\"wpa-accordion-header\" data-wpa-target=\"#accordion-css-mise-en-forme-animations-transitions-item-5\" aria-expanded=\"false\"><span class=\"wpa-accordion-title\"><span class=\"wpa-accordion-number\">05<\/span> UX and accessibility best practices<\/span><span class=\"wpa-accordion-icon\"><\/span><\/button><\/p>\n<div id=\"accordion-css-mise-en-forme-animations-transitions-item-5\" class=\"wpa-accordion-body\">\n<div class=\"wpa-accordion-content\">\n<h4>Respect user preferences<\/h4>\n<p>The media query `prefers-reduced-motion` detects if the user has enabled the &quot;Reduce Motion&quot; option in their operating system. This allows users with motion sensitivity, vestibular disorders, or epilepsy to disable animations. Respect this preference by removing or drastically reducing animations with `@media (prefers-reduced-motion: reduce)`.<\/p>\n<h4>UX Animation Principles<\/h4>\n<p>Animations should have a purpose: to guide attention, provide feedback, or maintain spatial continuity. Avoid purely decorative animations that can be distracting. Adhere to the 12 principles of Disney animation adapted for the web: appropriate timing, ease of entry\/exit, and consistency. Micro-interactions (hover, focus, click) should be subtle but perceptible, generally between 200 and 300ms.<\/p>\n<div class=\"info-box\">\n<p><strong>Key point<\/strong> Loading and page transition animations improve the perception of performance even if the actual time doesn&#039;t change.<\/p>\n<\/div>\n<div class=\"highlight-box\">\n<p><strong>Accessibility<\/strong> Ensure your animations do not flash more than 3 times per second to avoid epileptic seizures.<\/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\">Key points to remember<\/h3>\n<p style=\"margin: 0;color: #333\">Animations should improve UX without compromising accessibility, respecting user preferences and best practices.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2>Practical exercise<\/h2>\n<div class=\"tuto-instructions\" style=\"background: #e8f5e9;border-left: 4px solid #4caf50;padding: 16px 20px;margin-bottom: 20px;border-radius: 0 8px 8px 0\">\n<h3 style=\"color: #4caf50;margin: 0 0 8px 0;font-size: 16px\">\ud83c\udfaf Instructions<\/h3>\n<p style=\"margin: 0;color: #333\">Create an animated profile card with an avatar that transforms on hover, buttons with smooth transitions, and a pop-up animation. The card should be responsive and include engaging hover effects.<\/p>\n<\/div>\n<div class=\"codepen-block\" data-block-id=\"exercise-1\">\n<p class=\"codepen-block-label\">Reference code:<\/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>\n<\/div>\n<p><button class=\"codepen-copy-btn\">Copy<\/button>\n<\/div>\n<div class=\"codepen-code-container\">\n<pre class=\"codepen-code active\" data-lang=\"html\">&lt;div class=&quot;carte-profil&quot;&gt;\n  &lt;div class=&quot;carte-avatar&quot;&gt;\n    &lt;img src=&quot;https:\/\/randomuser.me\/api\/portraits\/women\/44.jpg&quot; alt=&quot;Avatar Sarah&quot;&gt;\n  &lt;\/div&gt;\n  &lt;div class=&quot;carte-info&quot;&gt;\n    &lt;h3 class=&quot;carte-nom&quot;&gt;Sarah Johnson&lt;\/h3&gt;\n    &lt;p class=&quot;carte-titre&quot;&gt;UX\/UI Designer&lt;\/p&gt;\n    &lt;p class=&quot;carte-description&quot;&gt;Passionate about creating exceptional user experiences and digital innovation.&lt;\/p&gt;\n    &lt;div class=&quot;carte-liens&quot;&gt;\n      &lt;a href=&quot;#&quot; class=&quot;carte-lien carte-lien--primary&quot;&gt;Portfolio&lt;\/a&gt;\n      &lt;a href=&quot;#&quot; class=&quot;carte-lien carte-lien--secondary&quot;&gt;Contact&lt;\/a&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<pre class=\"codepen-code\" data-lang=\"css\">@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .profile-map { max-width: 400px; margin: 2rem self; background:white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow:hidden; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; animation: fadeInUp 0.6s ease-out; } .profile-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .avatar-card { position: relative; text-align: center; padding: 2rem 2rem 1rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .avatar-card img { width: 120px; height: 120px; border-radius: 50%; border: 4px solid white; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .profile-card:hover .avatar-card img { transform: scale(1.1) rotate(5deg); } .infocard { padding: 1.5rem 2rem 2rem; text-align: center; } .card-name { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 600; color: #333; transition: color 0.3s ease; } .title card { margin: 0 0 1rem; color: #667eea; font-weight: 500; font-size: 1.1rem; } .map-description { margin: 0 0 1.5rem; color: #666; line-height: 1.6; font-size: 0.95rem; } .map-links { display: flex; gap: 1rem; justify-content: center; } .card-link { padding: 0.75rem 1.5rem; border-radius: 50px; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow:hidden; } .map-link--primary { background: #667eea; color:white; } .map-link--primary:hover { background: #5a67d8; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); } .map-link--secondary { border: 2px solid #667eea; color: #667eea; background: transparent; } .map-link--secondary:hover { background: #667eea; color:white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); } @media (prefers-reduced-motion: reduce) { .profile-card { animation: none; } .profile-card:hover { transform: none; } .profile-card:hover .avatar-card img { transform: none; } .map-link:hover { transform: none; } }<\/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>\n<\/div>\n<div class=\"monaco-actions\">\n<button class=\"monaco-btn monaco-btn-run\">\u25b6 Run<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-reset\">\u21ba Reset<\/button><br \/>\n<button class=\"monaco-btn monaco-btn-save\">\ud83d\udcbe Save<\/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>\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 Ready<\/span><br \/>\n<span class=\"monaco-status-right\">Monaco Editor v0.45<\/span>\n<\/div>\n<\/div>\n<h2>Summary<\/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\">Key points to remember<\/h3>\n<ul style=\"margin: 0;padding-left: 20px;color: #333\">\n<li><strong>CSS Transitions<\/strong> : Create gradual changes between element states, activated by triggers like :hover<\/li>\n<li><strong>Timing functions<\/strong> : Control the progression of animations with predefined or custom curves cubic-bezier()<\/li>\n<li><strong>@keyframes animations<\/strong> : Allows the creation of complex, multi-step sequences with precise control over each phase<\/li>\n<li><strong>Transform<\/strong> : High-performance property for 2D\/3D geometric transformations using GPU compositing<\/li>\n<li><strong>Accessibility and UX<\/strong> Respect prefers-reduced-motion and create useful animations that improve the user experience<\/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\">To deepen your knowledge:<\/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 \u2013 CSS animations and 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 \u2013 Animation Tips and Tricks<\/span><span style=\"color: #94a3b8\">\u2192<\/span><\/a><\/li>\n<\/ul>\n<\/div>\n<h2>Validate your knowledge<\/h2>\n<p>Test your understanding with this 10-question quiz:<\/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-css-mise-en-forme-animations-transitions.json\" aria-label=\"Interactive Quiz\"><div class=\"quiz-loading\" role=\"status\" aria-live=\"polite\"><span class=\"quiz-sr-only\">Loading quiz...<\/span><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>CSS Formatting \u2014 Animations, Transitions Discover the art of bringing your web interfaces to life with CSS animations and transitions! This lesson will teach you how to create engaging visual effects that will enhance the user experience of your websites. Module: Module 1: Web Technical Fundamentals Level: Beginner Duration: \u2026 <a href=\"https:\/\/lmspro.fr\/en\/css-mise-en-forme-animations-transitions\/\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> \u00ab\u00a0CSS Mise en Forme \u2014 Animations, transitions\u00a0\u00bb<\/span> &raquo;<\/a><\/p>","protected":false},"author":1,"featured_media":418,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[25,26,130,56,27,58,134],"class_list":["post-417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-module-1-fondamentaux-techniques-du-web","tag-animation","tag-css","tag-debutant","tag-fondamentaux","tag-html","tag-mise-en-forme","tag-web"],"_links":{"self":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/417","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=417"}],"version-history":[{"count":4,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":582,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/posts\/417\/revisions\/582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media\/418"}],"wp:attachment":[{"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/media?parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/categories?post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmspro.fr\/en\/wp-json\/wp\/v2\/tags?post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}