[{"data":1,"prerenderedAt":894},["ShallowReactive",2],{"page-\u002Fcss\u002Fvariables-et-animations":3,"pieces-css":852,"autour-\u002Fcss\u002Fvariables-et-animations":877,"prerequis-\u002Fcss\u002Fvariables-et-animations":881,"plan-css":883},{"id":4,"title":5,"body":6,"description":820,"extension":821,"ligne":66,"meta":822,"motsCles":823,"navigation":139,"niveau":828,"path":829,"prerequis":830,"ressources":832,"seo":843,"sources":844,"stem":850,"__hash__":851},"docs\u002Fcss\u002F06.variables-et-animations.md","Variables, transitions et animations",{"type":7,"value":8,"toc":810},"minimark",[9,14,32,36,49,53,60,218,231,234,243,247,250,277,287,290,331,334,350,354,361,436,442,471,478,493,528,532,538,666,675,691,695,698,749,755,759,806],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Déclarer et utiliser des variables CSS pour centraliser couleurs et espaces.",[18,22,23],{},"Adoucir un changement d'état avec une transition.",[18,25,26,27,31],{},"Créer une animation avec ",[28,29,30],"code",{},"@keyframes",", en respectant les préférences du visiteur.",[10,33,35],{"id":34},"le-problème-des-valeurs-répétées","Le problème des valeurs répétées",[37,38,39,40,44,45,48],"p",{},"Ton site de recettes utilise le même rouge foncé dans vingt règles. Pour le changer, tu dois toutes les modifier. Une ",[41,42,43],"strong",{},"variable CSS",", officiellement une ",[41,46,47],{},"propriété personnalisée",", règle ce problème : tu la déclares une fois, tu la réutilises partout.",[10,50,52],{"id":51},"déclarer-et-utiliser-une-variable","Déclarer et utiliser une variable",[37,54,55,56,59],{},"Le nom d'une variable commence par deux tirets. On les déclare le plus souvent dans ",[28,57,58],{},":root",", qui désigne l'élément racine de la page :",[61,62,68],"pre",{"className":63,"code":64,"filename":65,"language":66,"meta":67,"style":67},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default",":root {\n  --couleur-principale: #8b1a1a;\n  --fond: #faf6f0;\n  --espace: 1rem;\n}\n\n.recette {\n  background-color: var(--fond);\n  border-left: 4px solid var(--couleur-principale);\n  padding: var(--espace);\n}\n","style.css","css","",[28,69,70,82,98,111,128,134,141,149,169,196,213],{"__ignoreMap":67},[71,72,75,78],"span",{"class":73,"line":74},"line",1,[71,76,58],{"class":77},"s5iOY",[71,79,81],{"class":80},"scfrF"," {\n",[71,83,85,89,92,95],{"class":73,"line":84},2,[71,86,88],{"class":87},"sIXEE","  --couleur-principale",[71,90,91],{"class":80},": ",[71,93,94],{"class":77},"#8b1a1a",[71,96,97],{"class":80},";\n",[71,99,101,104,106,109],{"class":73,"line":100},3,[71,102,103],{"class":87},"  --fond",[71,105,91],{"class":80},[71,107,108],{"class":77},"#faf6f0",[71,110,97],{"class":80},[71,112,114,117,119,122,126],{"class":73,"line":113},4,[71,115,116],{"class":87},"  --espace",[71,118,91],{"class":80},[71,120,121],{"class":77},"1",[71,123,125],{"class":124},"sOnC1","rem",[71,127,97],{"class":80},[71,129,131],{"class":73,"line":130},5,[71,132,133],{"class":80},"}\n",[71,135,137],{"class":73,"line":136},6,[71,138,140],{"emptyLinePlaceholder":139},true,"\n",[71,142,144,147],{"class":73,"line":143},7,[71,145,146],{"class":77},".recette",[71,148,81],{"class":80},[71,150,152,155,157,160,163,166],{"class":73,"line":151},8,[71,153,154],{"class":77},"  background-color",[71,156,91],{"class":80},[71,158,159],{"class":77},"var",[71,161,162],{"class":80},"(",[71,164,165],{"class":87},"--fond",[71,167,168],{"class":80},");\n",[71,170,172,175,177,180,183,186,189,191,194],{"class":73,"line":171},9,[71,173,174],{"class":77},"  border-left",[71,176,91],{"class":80},[71,178,179],{"class":77},"4",[71,181,182],{"class":124},"px",[71,184,185],{"class":77}," solid",[71,187,188],{"class":77}," var",[71,190,162],{"class":80},[71,192,193],{"class":87},"--couleur-principale",[71,195,168],{"class":80},[71,197,199,202,204,206,208,211],{"class":73,"line":198},10,[71,200,201],{"class":77},"  padding",[71,203,91],{"class":80},[71,205,159],{"class":77},[71,207,162],{"class":80},[71,209,210],{"class":87},"--espace",[71,212,168],{"class":80},[71,214,216],{"class":73,"line":215},11,[71,217,133],{"class":80},[37,219,220,221,224,225,227,228,230],{},"La fonction ",[28,222,223],{},"var(--nom)"," lit la valeur. Modifie ",[28,226,193],{}," dans ",[28,229,58],{}," et toute la page change.",[37,232,233],{},"On peut donner une valeur de secours, utilisée si la variable n'existe pas :",[61,235,237],{"className":63,"code":236,"language":66,"meta":67,"style":67},"color: var(--couleur-texte, #333);\n",[28,238,239],{"__ignoreMap":67},[71,240,241],{"class":73,"line":74},[71,242,236],{"class":80},[10,244,246],{"id":245},"redéfinir-selon-le-contexte","Redéfinir selon le contexte",[37,248,249],{},"Les variables suivent la cascade et l'héritage. Une variable redéfinie dans un élément vaut pour cet élément et ses enfants :",[61,251,253],{"className":63,"code":252,"language":66,"meta":67,"style":67},".recette-vegetarienne {\n  --couleur-principale: #2e6b2e;\n}\n",[28,254,255,262,273],{"__ignoreMap":67},[71,256,257,260],{"class":73,"line":74},[71,258,259],{"class":77},".recette-vegetarienne",[71,261,81],{"class":80},[71,263,264,266,268,271],{"class":73,"line":84},[71,265,88],{"class":87},[71,267,91],{"class":80},[71,269,270],{"class":77},"#2e6b2e",[71,272,97],{"class":80},[71,274,275],{"class":73,"line":100},[71,276,133],{"class":80},[37,278,279,280,283,284,286],{},"Les règles qui utilisent ",[28,281,282],{},"var(--couleur-principale)"," à l'intérieur de ",[28,285,259],{}," deviennent vertes, sans écrire de nouvelle règle de couleur.",[37,288,289],{},"C'est aussi la base d'un thème sombre :",[61,291,293],{"className":63,"code":292,"language":66,"meta":67,"style":67},"@media (prefers-color-scheme: dark) {\n  :root {\n    --fond: #1d1a17;\n  }\n}\n",[28,294,295,303,310,322,327],{"__ignoreMap":67},[71,296,297,300],{"class":73,"line":74},[71,298,299],{"class":124},"@media",[71,301,302],{"class":80}," (prefers-color-scheme: dark) {\n",[71,304,305,308],{"class":73,"line":84},[71,306,307],{"class":77},"  :root",[71,309,81],{"class":80},[71,311,312,315,317,320],{"class":73,"line":100},[71,313,314],{"class":87},"    --fond",[71,316,91],{"class":80},[71,318,319],{"class":77},"#1d1a17",[71,321,97],{"class":80},[71,323,324],{"class":73,"line":113},[71,325,326],{"class":80},"  }\n",[71,328,329],{"class":73,"line":130},[71,330,133],{"class":80},[37,332,333],{},"Le navigateur applique ce bloc si le visiteur a choisi un thème sombre sur son système.",[335,336,337],"tip",{},[37,338,339,340,342,343,345,346,349],{},"Nomme tes variables d'après leur rôle (",[28,341,165],{},", ",[28,344,210],{},") plutôt que leur valeur (",[28,347,348],{},"--rouge","). Si la couleur change, le nom reste vrai.",[10,351,353],{"id":352},"les-transitions","Les transitions",[37,355,356,357,360],{},"Un changement d'état est brutal par défaut : au survol, la couleur saute. Une ",[41,358,359],{},"transition"," rend le passage progressif.",[61,362,364],{"className":63,"code":363,"language":66,"meta":67,"style":67},".bouton {\n  background-color: var(--couleur-principale);\n  transition: background-color 0.3s ease;\n}\n\n.bouton:hover {\n  background-color: #b22222;\n}\n",[28,365,366,373,387,406,410,414,421,432],{"__ignoreMap":67},[71,367,368,371],{"class":73,"line":74},[71,369,370],{"class":77},".bouton",[71,372,81],{"class":80},[71,374,375,377,379,381,383,385],{"class":73,"line":84},[71,376,154],{"class":77},[71,378,91],{"class":80},[71,380,159],{"class":77},[71,382,162],{"class":80},[71,384,193],{"class":87},[71,386,168],{"class":80},[71,388,389,392,395,398,401,404],{"class":73,"line":100},[71,390,391],{"class":77},"  transition",[71,393,394],{"class":80},": background-color ",[71,396,397],{"class":77},"0.3",[71,399,400],{"class":124},"s",[71,402,403],{"class":77}," ease",[71,405,97],{"class":80},[71,407,408],{"class":73,"line":113},[71,409,133],{"class":80},[71,411,412],{"class":73,"line":130},[71,413,140],{"emptyLinePlaceholder":139},[71,415,416,419],{"class":73,"line":136},[71,417,418],{"class":77},".bouton:hover",[71,420,81],{"class":80},[71,422,423,425,427,430],{"class":73,"line":143},[71,424,154],{"class":77},[71,426,91],{"class":80},[71,428,429],{"class":77},"#b22222",[71,431,97],{"class":80},[71,433,434],{"class":73,"line":151},[71,435,133],{"class":80},[37,437,438,439,441],{},"La déclaration ",[28,440,359],{}," prend trois informations principales :",[443,444,445,452,458],"ol",{},[18,446,447,448,451],{},"la propriété qui s'anime (",[28,449,450],{},"background-color",") ;",[18,453,454,455,451],{},"la durée (",[28,456,457],{},"0.3s",[18,459,460,461,342,464,342,467,470],{},"la courbe de vitesse (",[28,462,463],{},"ease",[28,465,466],{},"linear",[28,468,469],{},"ease-in-out","...).",[37,472,473,474,477],{},"Tu la poses sur l'état de départ, pas sur le ",[28,475,476],{},":hover",". Ainsi la transition joue à l'aller et au retour.",[37,479,480,481,484,485,488,489,492],{},"Évite ",[28,482,483],{},"transition: all",", qui anime tout et peut surprendre. Nomme les propriétés utiles. Les plus fluides à animer sont ",[28,486,487],{},"opacity"," et ",[28,490,491],{},"transform",".",[61,494,496],{"className":63,"code":495,"language":66,"meta":67,"style":67},".recette:hover {\n  transform: translateY(-4px);\n}\n",[28,497,498,505,524],{"__ignoreMap":67},[71,499,500,503],{"class":73,"line":74},[71,501,502],{"class":77},".recette:hover",[71,504,81],{"class":80},[71,506,507,510,512,515,517,520,522],{"class":73,"line":84},[71,508,509],{"class":77},"  transform",[71,511,91],{"class":80},[71,513,514],{"class":77},"translateY",[71,516,162],{"class":80},[71,518,519],{"class":77},"-4",[71,521,182],{"class":124},[71,523,168],{"class":80},[71,525,526],{"class":73,"line":100},[71,527,133],{"class":80},[10,529,531],{"id":530},"les-animations-avec-keyframes","Les animations avec @keyframes",[37,533,534,535,492],{},"Une transition va d'un état à un autre au déclenchement. Pour une animation qui se joue seule, ou en boucle, il faut des ",[41,536,537],{},"images clés",[61,539,541],{"className":63,"code":540,"language":66,"meta":67,"style":67},"@keyframes apparition {\n  from {\n    opacity: 0;\n    transform: translateY(1rem);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.recette {\n  animation: apparition 0.5s ease-out;\n}\n",[28,542,543,552,559,571,588,592,599,609,623,627,631,635,642,661],{"__ignoreMap":67},[71,544,545,547,550],{"class":73,"line":74},[71,546,30],{"class":124},[71,548,549],{"class":87}," apparition",[71,551,81],{"class":80},[71,553,554,557],{"class":73,"line":84},[71,555,556],{"class":77},"  from",[71,558,81],{"class":80},[71,560,561,564,566,569],{"class":73,"line":100},[71,562,563],{"class":77},"    opacity",[71,565,91],{"class":80},[71,567,568],{"class":77},"0",[71,570,97],{"class":80},[71,572,573,576,578,580,582,584,586],{"class":73,"line":113},[71,574,575],{"class":77},"    transform",[71,577,91],{"class":80},[71,579,514],{"class":77},[71,581,162],{"class":80},[71,583,121],{"class":77},[71,585,125],{"class":124},[71,587,168],{"class":80},[71,589,590],{"class":73,"line":130},[71,591,326],{"class":80},[71,593,594,597],{"class":73,"line":136},[71,595,596],{"class":77},"  to",[71,598,81],{"class":80},[71,600,601,603,605,607],{"class":73,"line":143},[71,602,563],{"class":77},[71,604,91],{"class":80},[71,606,121],{"class":77},[71,608,97],{"class":80},[71,610,611,613,615,617,619,621],{"class":73,"line":151},[71,612,575],{"class":77},[71,614,91],{"class":80},[71,616,514],{"class":77},[71,618,162],{"class":80},[71,620,568],{"class":77},[71,622,168],{"class":80},[71,624,625],{"class":73,"line":171},[71,626,326],{"class":80},[71,628,629],{"class":73,"line":198},[71,630,133],{"class":80},[71,632,633],{"class":73,"line":215},[71,634,140],{"emptyLinePlaceholder":139},[71,636,638,640],{"class":73,"line":637},12,[71,639,146],{"class":77},[71,641,81],{"class":80},[71,643,645,648,651,654,656,659],{"class":73,"line":644},13,[71,646,647],{"class":77},"  animation",[71,649,650],{"class":80},": apparition ",[71,652,653],{"class":77},"0.5",[71,655,400],{"class":124},[71,657,658],{"class":77}," ease-out",[71,660,97],{"class":80},[71,662,664],{"class":73,"line":663},14,[71,665,133],{"class":80},[37,667,668,670,671,674],{},[28,669,30],{}," nomme l'animation et décrit ses étapes. La propriété ",[28,672,673],{},"animation"," l'applique avec une durée et une courbe. Au chargement, chaque carte apparaît en glissant vers le haut.",[37,676,677,678,342,681,342,684,687,688,492],{},"Pour plus d'étapes, utilise des pourcentages (",[28,679,680],{},"0%",[28,682,683],{},"50%",[28,685,686],{},"100%","). Une animation peut se répéter avec ",[28,689,690],{},"animation-iteration-count: infinite",[10,692,694],{"id":693},"respecter-les-préférences-daccessibilité","Respecter les préférences d'accessibilité",[37,696,697],{},"Certains visiteurs sont gênés par le mouvement. Leur système le signale, et CSS peut le lire :",[61,699,701],{"className":63,"code":700,"language":66,"meta":67,"style":67},"@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none;\n    transition: none;\n  }\n}\n",[28,702,703,710,718,730,741,745],{"__ignoreMap":67},[71,704,705,707],{"class":73,"line":74},[71,706,299],{"class":124},[71,708,709],{"class":80}," (prefers-reduced-motion: reduce) {\n",[71,711,712,716],{"class":73,"line":84},[71,713,715],{"class":714},"s5JFL","  *",[71,717,81],{"class":80},[71,719,720,723,725,728],{"class":73,"line":100},[71,721,722],{"class":77},"    animation",[71,724,91],{"class":80},[71,726,727],{"class":77},"none",[71,729,97],{"class":80},[71,731,732,735,737,739],{"class":73,"line":113},[71,733,734],{"class":77},"    transition",[71,736,91],{"class":80},[71,738,727],{"class":77},[71,740,97],{"class":80},[71,742,743],{"class":73,"line":130},[71,744,326],{"class":80},[71,746,747],{"class":73,"line":136},[71,748,133],{"class":80},[750,751,752],"warning",{},[37,753,754],{},"Ne réserve jamais une information importante à une animation. Si un message disparaît en fondu, il doit rester lisible pour qui a désactivé les animations.",[10,756,758],{"id":757},"à-retenir","À retenir",[15,760,761,773,776,782,790,800],{},[18,762,763,764,767,768,770,771,492],{},"Une variable se déclare avec ",[28,765,766],{},"--nom"," (souvent dans ",[28,769,58],{},") et se lit avec ",[28,772,223],{},[18,774,775],{},"Les variables suivent la cascade : on peut les redéfinir dans un élément pour changer un thème local.",[18,777,778,779,781],{},"Une ",[28,780,359],{}," adoucit un changement d'état ; pose-la sur l'état de départ.",[18,783,784,786,787,789],{},[28,785,30],{}," décrit les étapes, ",[28,788,673],{}," l'applique avec durée et courbe.",[18,791,792,793,488,795,797,798,492],{},"Anime de préférence ",[28,794,487],{},[28,796,491],{},", et évite ",[28,799,483],{},[18,801,802,805],{},[28,803,804],{},"prefers-reduced-motion: reduce"," permet de couper les animations pour les visiteurs qui le demandent.",[807,808,809],"style",{},"html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}",{"title":67,"searchDepth":84,"depth":100,"links":811},[812,813,814,815,816,817,818,819],{"id":12,"depth":84,"text":13},{"id":34,"depth":84,"text":35},{"id":51,"depth":84,"text":52},{"id":245,"depth":84,"text":246},{"id":352,"depth":84,"text":353},{"id":530,"depth":84,"text":531},{"id":693,"depth":84,"text":694},{"id":757,"depth":84,"text":758},"Centraliser ses valeurs avec les variables CSS, puis animer l'interface avec les transitions et les keyframes.","md",{},[824,47,825,359,673,30,826,827,58],"variables CSS","var()","thème sombre","prefers-reduced-motion","avance","\u002Fcss\u002Fvariables-et-animations",[831],"\u002Fcss\u002Fgrid-et-responsive",[833,837,840],{"nom":834,"url":835,"type":836},"MDN, Utiliser les propriétés personnalisées CSS","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FCascading_variables\u002FUsing_custom_properties","doc",{"nom":838,"url":839,"type":836},"MDN, la propriété transition","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FCSS\u002Ftransition",{"nom":841,"url":842,"type":836},"MDN, la règle @keyframes","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FCSS\u002F@keyframes",{"title":5,"description":820},[845,846,848],{"nom":834,"url":835},{"nom":847,"url":839},"MDN, transition",{"nom":849,"url":842},"MDN, @keyframes","css\u002F06.variables-et-animations","6N-CMaaMfS1sKHrCFE6YRkhX4pJkv0OxX7k9ft-EwNs",[853,857,861,865,869,872,873],{"path":854,"title":855,"stem":856},"\u002Fcss\u002Fpremiers-pas","Premiers pas en CSS","css\u002F01.premiers-pas",{"path":858,"title":859,"stem":860},"\u002Fcss\u002Fcascade-et-specificite","Cascade et spécificité","css\u002F02.cascade-et-specificite",{"path":862,"title":863,"stem":864},"\u002Fcss\u002Fboites-et-texte","Boîtes, unités et texte","css\u002F03.boites-et-texte",{"path":866,"title":867,"stem":868},"\u002Fcss\u002Fflexbox","Flexbox","css\u002F04.flexbox",{"path":831,"title":870,"stem":871},"Grid et responsive","css\u002F05.grid-et-responsive",{"path":829,"title":5,"stem":850},{"path":874,"title":875,"stem":876},"\u002Fcss","CSS","css\u002Findex",[878,880],{"title":870,"path":831,"stem":871,"description":879,"children":-1},"Créer des grilles avec CSS Grid et adapter une page à tous les écrans avec les media queries, en partant du mobile.",null,[882],{"path":831,"title":870,"ligne":66},[884,886,887,888,890,891,892],{"path":854,"title":855,"niveau":885,"stem":856},"debutant",{"path":858,"title":859,"niveau":885,"stem":860},{"path":862,"title":863,"niveau":885,"stem":864},{"path":866,"title":867,"niveau":889,"stem":868},"intermediaire",{"path":831,"title":870,"niveau":889,"stem":871},{"path":829,"title":5,"niveau":828,"stem":850},{"path":874,"title":875,"niveau":893,"stem":876},"memo",1794583447625]