[{"data":1,"prerenderedAt":1043},["ShallowReactive",2],{"i-ic:outline-arrow-upward":3,"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E":8,"episode-\u002Fpodcasts\u002Fanimecss":16,"github-sponsor":945,"i-material-symbols:home":1020,"i-ic:baseline-play-circle-filled-white":1022,"i-material-symbols:ios-share":1024,"i-cbi:deezer-logo":1026,"i-vscode-icons:file-type-rss":1028,"i-ri:heart-3-fill":1031,"Brand_dlIOZD2O03VXPoFYukMOJnSnZRMTmJ0YwMKY5fNK8":1033,"Duration_OaBT5oji4n5zkmw7gDlQwMezbXLpfKDogHSkNY9i4":1038},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"m4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z\"\u002F>",["Island",9],{"key":10,"result":11},"Footer_afPiwGMwNiEyV4syWzw87ovzxHAgs4iwKtCn4zqBf8E",{"head":12},{"style":13},[14],{"innerHTML":15},":where(.i-mdi\\:github){display:inline-block;width:1em;height:1em;background-color:currentColor;-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;--svg:url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'\u002F%3E%3C\u002Fsvg%3E\")}",{"id":17,"title":18,"author":19,"body":20,"categories":923,"description":925,"dsSlug":926,"duration":927,"episodeArtwork":928,"episodeNumber":929,"episodeType":930,"explicit":6,"extension":931,"guid":932,"links":933,"meta":934,"navigation":109,"path":936,"publicationDate":937,"season":46,"seo":938,"status":939,"stem":940,"subtitle":941,"tags":942,"videoLink":943,"__hash__":944},"podcasts\u002Fpodcasts\u002F044.animeCSS\u002Findex.md","Les animations avec CSS","Double Slash",{"type":21,"value":22,"toc":902},"minimark",[23,28,32,163,168,171,175,178,181,215,218,222,225,228,258,261,274,278,281,284,312,315,344,348,351,400,403,486,489,493,496,499,502,505,538,653,659,663,666,669,673,676,679,682,685,688,691,694,699,702,705,708,714,717,726,730,733,765,771,775,782,786,789,792,810,814,818,858,862,877,881,895,898],[24,25,27],"h2",{"id":26},"animation-avec-css","Animation avec CSS",[29,30,31],"p",{},"Tout commence avec un changement d’état d’un élément.\nChangement de couleur et de taille pour un bouton par exemple quand je passe dessus avec la souris.",[33,34,39],"pre",{"className":35,"code":36,"language":37,"meta":38,"style":38},"language-css shiki shiki-themes synthwave-84","button {\n    width: 170px;\n    height: 35px;\n    background-color: #eee;\n}\n\nbutton:hover {\n    width: 200px;\n    height: 40px;\n    background-color: #ccc;\n}\n","css","",[40,41,42,55,72,85,98,104,111,122,134,146,158],"code",{"__ignoreMap":38},[43,44,47,51],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sfE7D","button",[43,52,54],{"class":53},"soy-K"," {\n",[43,56,58,61,65,69],{"class":45,"line":57},2,[43,59,60],{"class":49},"    width",[43,62,64],{"class":63},"s2hdG",":",[43,66,68],{"class":67},"sSmKr"," 170px",[43,70,71],{"class":53},";\n",[43,73,75,78,80,83],{"class":45,"line":74},3,[43,76,77],{"class":49},"    height",[43,79,64],{"class":63},[43,81,82],{"class":67}," 35px",[43,84,71],{"class":53},[43,86,88,91,93,96],{"class":45,"line":87},4,[43,89,90],{"class":49},"    background-color",[43,92,64],{"class":63},[43,94,95],{"class":67}," #eee",[43,97,71],{"class":53},[43,99,101],{"class":45,"line":100},5,[43,102,103],{"class":53},"}\n",[43,105,107],{"class":45,"line":106},6,[43,108,110],{"emptyLinePlaceholder":109},true,"\n",[43,112,114,116,120],{"class":45,"line":113},7,[43,115,50],{"class":49},[43,117,119],{"class":118},"s1ZOD",":hover",[43,121,54],{"class":53},[43,123,125,127,129,132],{"class":45,"line":124},8,[43,126,60],{"class":49},[43,128,64],{"class":63},[43,130,131],{"class":67}," 200px",[43,133,71],{"class":53},[43,135,137,139,141,144],{"class":45,"line":136},9,[43,138,77],{"class":49},[43,140,64],{"class":63},[43,142,143],{"class":67}," 40px",[43,145,71],{"class":53},[43,147,149,151,153,156],{"class":45,"line":148},10,[43,150,90],{"class":49},[43,152,64],{"class":63},[43,154,155],{"class":67}," #ccc",[43,157,71],{"class":53},[43,159,161],{"class":45,"line":160},11,[43,162,103],{"class":53},[164,165,167],"h3",{"id":166},"déclencher-les-changements-détats","Déclencher les changements d’états",[29,169,170],{},"Pour déclencher des animations, on peut utiliser les pseudo classes (focus, hover, etc.), ajouter des classes avec JS et utiliser \"IntersectionObserver\" pour déclencher l'animation quand l'élément devient visible.",[164,172,174],{"id":173},"transition","Transition",[29,176,177],{},"L’animation\u002Ftransition apparait dès que l’on ajoute la propriété “Transition\"",[29,179,180],{},"Pour déterminer les transitions entre 2 états :",[33,182,184],{"className":35,"code":183,"language":37,"meta":38,"style":38},"transition: \u003Cproperty> \u003Cduration> \u003Ctiming-function> \u003Cdelay>;\n",[40,185,186],{"__ignoreMap":38},[43,187,188,191,195,198,200,203,206,208,211,213],{"class":45,"line":46},[43,189,190],{"class":53},"transition: \u003Cproperty",[43,192,194],{"class":193},"scrqX",">",[43,196,197],{"class":53}," \u003Cduration",[43,199,194],{"class":193},[43,201,202],{"class":53}," \u003C",[43,204,205],{"class":49},"timing-function",[43,207,194],{"class":193},[43,209,210],{"class":53}," \u003Cdelay",[43,212,194],{"class":193},[43,214,71],{"class":53},[29,216,217],{},"Marche sur quasiment tout : width, height, background, etc..",[164,219,221],{"id":220},"transform","Transform",[29,223,224],{},"Mais dans l’idéal, il faut utiliser en priorité la propriété Transform. On reviendra sur la raison plus tard.",[29,226,227],{},"Transform c'est 20 propriétés de transformation.",[33,229,231],{"className":35,"code":230,"language":37,"meta":38,"style":38},"transform: scale();\ntransform: translate()\ntransform: rotate()\ntransform: skew()\ntransform: perspective()\n",[40,232,233,238,243,248,253],{"__ignoreMap":38},[43,234,235],{"class":45,"line":46},[43,236,237],{"class":53},"transform: scale();\n",[43,239,240],{"class":45,"line":57},[43,241,242],{"class":53},"transform: translate()\n",[43,244,245],{"class":45,"line":74},[43,246,247],{"class":53},"transform: rotate()\n",[43,249,250],{"class":45,"line":87},[43,251,252],{"class":53},"transform: skew()\n",[43,254,255],{"class":45,"line":100},[43,256,257],{"class":53},"transform: perspective()\n",[29,259,260],{},"Avec transform-origin, on peut créer des mouvements poussés",[33,262,264],{"className":35,"code":263,"language":37,"meta":38,"style":38},"transform-origin: 0% 50%;\n",[40,265,266],{"__ignoreMap":38},[43,267,268,271],{"class":45,"line":46},[43,269,270],{"class":49},"transform-origin",[43,272,273],{"class":53},": 0% 50%;\n",[164,275,277],{"id":276},"animation","Animation",[29,279,280],{},"Passons maintenant aux vraies animations, celle qui peuvent tourner en boucle.",[29,282,283],{},"Il est tout à fait possible de faire des animations avec CSS.\nPour cela, il faut utiliser les propriétés animations :",[285,286,287,291,294,297,300,303,306,309],"ul",{},[288,289,290],"li",{},"animation-name",[288,292,293],{},"animation-duration",[288,295,296],{},"animation-timing-function",[288,298,299],{},"animation-delay",[288,301,302],{},"animation-iteration-count",[288,304,305],{},"animation-direction",[288,307,308],{},"animation-fill-mode",[288,310,311],{},"animation-play-state",[29,313,314],{},"Évidemment, il y a une écriture raccourcie pour toutes les propriétés :",[33,316,318],{"className":35,"code":317,"language":37,"meta":38,"style":38},"animation: name duration timing-function delay iteration-count direction fill-mode play-state;\n",[40,319,320],{"__ignoreMap":38},[43,321,322,325,327,330,333,336,339,342],{"class":45,"line":46},[43,323,324],{"class":53},"animation: name duration ",[43,326,205],{"class":49},[43,328,329],{"class":53}," delay ",[43,331,332],{"class":49},"iteration-count",[43,334,335],{"class":53}," direction ",[43,337,338],{"class":49},"fill-mode",[43,340,341],{"class":49}," play-state",[43,343,71],{"class":53},[164,345,347],{"id":346},"keyframes","Keyframes",[29,349,350],{},"Mais avant de pouvoir utiliser les propriétés ”animation”, il faut créer une timeline avec @keyframes :",[33,352,354],{"className":35,"code":353,"language":37,"meta":38,"style":38},"@keyframes mymove {\n  from {top: 0px;}\n  to {top: 200px;}\n}\n",[40,355,356,367,383,396],{"__ignoreMap":38},[43,357,358,361,365],{"class":45,"line":46},[43,359,360],{"class":193},"@keyframes",[43,362,364],{"class":363},"sH7Js"," mymove",[43,366,54],{"class":53},[43,368,369,372,375,377,380],{"class":45,"line":57},[43,370,371],{"class":53},"  from {",[43,373,374],{"class":49},"top",[43,376,64],{"class":63},[43,378,379],{"class":67}," 0px",[43,381,382],{"class":53},";}\n",[43,384,385,388,390,392,394],{"class":45,"line":74},[43,386,387],{"class":53},"  to {",[43,389,374],{"class":49},[43,391,64],{"class":63},[43,393,131],{"class":67},[43,395,382],{"class":53},[43,397,398],{"class":45,"line":87},[43,399,103],{"class":53},[29,401,402],{},"ou",[33,404,406],{"className":35,"code":405,"language":37,"meta":38,"style":38},"@keyframes mymove {\n  0%   {top: 0px;}\n  25%  {top: 200px;}\n  50%  {top: 100px;}\n  75%  {top: 200px;}\n  100% {top: 0px;}\n}\n",[40,407,408,416,429,442,456,469,482],{"__ignoreMap":38},[43,409,410,412,414],{"class":45,"line":46},[43,411,360],{"class":193},[43,413,364],{"class":363},[43,415,54],{"class":53},[43,417,418,421,423,425,427],{"class":45,"line":57},[43,419,420],{"class":53},"  0%   {",[43,422,374],{"class":49},[43,424,64],{"class":63},[43,426,379],{"class":67},[43,428,382],{"class":53},[43,430,431,434,436,438,440],{"class":45,"line":74},[43,432,433],{"class":53},"  25%  {",[43,435,374],{"class":49},[43,437,64],{"class":63},[43,439,131],{"class":67},[43,441,382],{"class":53},[43,443,444,447,449,451,454],{"class":45,"line":87},[43,445,446],{"class":53},"  50%  {",[43,448,374],{"class":49},[43,450,64],{"class":63},[43,452,453],{"class":67}," 100px",[43,455,382],{"class":53},[43,457,458,461,463,465,467],{"class":45,"line":100},[43,459,460],{"class":53},"  75%  {",[43,462,374],{"class":49},[43,464,64],{"class":63},[43,466,131],{"class":67},[43,468,382],{"class":53},[43,470,471,474,476,478,480],{"class":45,"line":106},[43,472,473],{"class":53},"  100% {",[43,475,374],{"class":49},[43,477,64],{"class":63},[43,479,379],{"class":67},[43,481,382],{"class":53},[43,483,484],{"class":45,"line":113},[43,485,103],{"class":53},[29,487,488],{},"Dans l'ensemble, c'est assez simple.\nOn peut tout utiliser dans les @keyframes mais attention aux performances !",[164,490,492],{"id":491},"motion-path","Motion Path",[29,494,495],{},"3 propriétés qui permettent à un élément de suivre un tracé.",[29,497,498],{},"Le tracé a suivre : offset-path",[29,500,501],{},"Position de l’élément sur le tracé : offset-distance",[29,503,504],{},"La rotation de l’élément sur le tracé : offset-rotate",[33,506,508],{"className":35,"code":507,"language":37,"meta":38,"style":38},"div {\n  offset-path: path('M10 10 H 180 V 180 H 10 Z');\n}\n",[40,509,510,517,534],{"__ignoreMap":38},[43,511,512,515],{"class":45,"line":46},[43,513,514],{"class":49},"div",[43,516,54],{"class":53},[43,518,519,522,524,527,531],{"class":45,"line":57},[43,520,521],{"class":49},"  offset-path",[43,523,64],{"class":63},[43,525,526],{"class":53}," path(",[43,528,530],{"class":529},"sFl1-","'M10 10 H 180 V 180 H 10 Z'",[43,532,533],{"class":53},");\n",[43,535,536],{"class":45,"line":74},[43,537,103],{"class":53},[33,539,541],{"className":35,"code":540,"language":37,"meta":38,"style":38},"div {\n  animation: myMove 1s;\n}\n\n@keyframes myMove {\n  0% {\n    offset-distance: 0%;\n  }\n    40% {\n        offset-distance: 70%;\n    }\n  100% {\n    offset-distance: 100%;\n  }\n}\n",[40,542,543,549,564,568,572,581,586,598,603,608,620,625,631,643,648],{"__ignoreMap":38},[43,544,545,547],{"class":45,"line":46},[43,546,514],{"class":49},[43,548,54],{"class":53},[43,550,551,554,556,559,562],{"class":45,"line":57},[43,552,553],{"class":49},"  animation",[43,555,64],{"class":63},[43,557,558],{"class":53}," myMove ",[43,560,561],{"class":67},"1s",[43,563,71],{"class":53},[43,565,566],{"class":45,"line":74},[43,567,103],{"class":53},[43,569,570],{"class":45,"line":87},[43,571,110],{"emptyLinePlaceholder":109},[43,573,574,576,579],{"class":45,"line":100},[43,575,360],{"class":193},[43,577,578],{"class":363}," myMove",[43,580,54],{"class":53},[43,582,583],{"class":45,"line":106},[43,584,585],{"class":53},"  0% {\n",[43,587,588,591,593,596],{"class":45,"line":113},[43,589,590],{"class":49},"    offset-distance",[43,592,64],{"class":63},[43,594,595],{"class":67}," 0%",[43,597,71],{"class":53},[43,599,600],{"class":45,"line":124},[43,601,602],{"class":53},"  }\n",[43,604,605],{"class":45,"line":136},[43,606,607],{"class":53},"    40% {\n",[43,609,610,613,615,618],{"class":45,"line":148},[43,611,612],{"class":49},"        offset-distance",[43,614,64],{"class":63},[43,616,617],{"class":67}," 70%",[43,619,71],{"class":53},[43,621,622],{"class":45,"line":160},[43,623,624],{"class":53},"    }\n",[43,626,628],{"class":45,"line":627},12,[43,629,630],{"class":53},"  100% {\n",[43,632,634,636,638,641],{"class":45,"line":633},13,[43,635,590],{"class":49},[43,637,64],{"class":63},[43,639,640],{"class":67}," 100%",[43,642,71],{"class":53},[43,644,646],{"class":45,"line":645},14,[43,647,602],{"class":53},[43,649,651],{"class":45,"line":650},15,[43,652,103],{"class":53},[29,654,655],{},[656,657,658],"strong",{},"Bientôt supporté par Safari !!",[164,660,662],{"id":661},"fps","FPS",[29,664,665],{},"La plupart des appareils actualisent aujourd'hui leurs écrans 60 fois par seconde. S'il y a une animation ou une transition en cours d'exécution, ou si l'utilisateur fait défiler les pages, le navigateur doit faire correspondre le taux de rafraîchissement de l'appareil et mettre en place 1 nouvelle image, ou cadre, pour chacun de ces rafraîchissements d'écran.",[29,667,668],{},"Chacune de ces cadres a un budget d'un peu plus de 16 ms (1 seconde \u002F 60 = 16,66 ms). En réalité, cependant, le navigateur a un travail de nettoyage à faire, donc tout votre travail doit être achevé à l'intérieur de 10 ms. Lorsque vous ne respectez pas ce budget, la fréquence d'images baisse et le contenu juge à l'écran. Ceci est souvent appelé Jank, et cela a un impact négatif sur l'expérience de l'utilisateur.",[24,670,672],{"id":671},"bien-animer","Bien animer !",[29,674,675],{},"Pour commencer, on va parler des étapes de rendu du page web (HTML, CSS).",[29,677,678],{},"Cela fonctionne comme un tunnel qui s'appelle pixels-to-screen pipeline :",[29,680,681],{},"0 - JavaScript : Trier, ajouter un élément dans le DOM, etc... Dans le cas où c'est JS qui déclenche un changement visuel.",[29,683,684],{},"1 - style calculation (calcul du style) : lecture du CSS et détermination des règles basées sur les sélecteurs pour pouvoir les appliquer sur les éléments",[29,686,687],{},"2 - Layout (disposition) : Determination de la taille des éléments et placements dans le flux de la page",[29,689,690],{},"3 - Paint (peinture( : Les éléments deviennent des pixels. Essentiellement toutes les parties visuelles des éléments. Le dessin est généralement effectué sur plusieurs surfaces, souvent appelées couches.",[29,692,693],{},"4 - Composition : assemblage des layers entre eux pour composer la page",[29,695,696],{},[656,697,698],{},"Important",[29,700,701],{},"Les propriétés ne sont pas toutes appliquées aux mêmes étapes.\nwidth et height c'est au layout.\nbackgroud color c'est au paint.",[29,703,704],{},"Chaque étape déclenche les suivantes.",[29,706,707],{},"Changer la width d'un élément déclenche un layout > paint > composition.\nDonc plus de calcul et donc plus de temps.",[29,709,710,711],{},"Dans l'idéal, il faut éviter de déclencheur du layout et du paint.\nEt donc, utiliser des propriétés qui déclenche que de la composition :\n",[656,712,713],{},"transform et opacity.",[29,715,716],{},"Si vous devez utiliser une propriété qui déclenche la disposition ou la peinture, il est peu probable que vous puissiez rendre l'animation fluide et performante.",[29,718,719,725],{},[720,721,722],"a",{"href":722,"rel":723},"https:\u002F\u002Fcsstriggers.com\u002F",[724],"nofollow"," pour vérifier ce que chaque propriété déclenche.",[164,727,729],{"id":728},"will-change","will change",[29,731,732],{},"Si vous êtes obligé d'utiliser des propriétés autres que transform et opacity, vous pouvez spécifier au navigateur que l'élément va subir des transformations.",[33,734,736],{"className":35,"code":735,"language":37,"meta":38,"style":38},"body > .sidebar {\n  will-change: transform;\n}\n",[40,737,738,751,761],{"__ignoreMap":38},[43,739,740,743,746,749],{"class":45,"line":46},[43,741,742],{"class":49},"body",[43,744,745],{"class":193}," >",[43,747,748],{"class":193}," .sidebar",[43,750,54],{"class":53},[43,752,753,756,758],{"class":45,"line":57},[43,754,755],{"class":49},"  will-change",[43,757,64],{"class":63},[43,759,760],{"class":53}," transform;\n",[43,762,763],{"class":45,"line":74},[43,764,103],{"class":53},[29,766,767,770],{},[656,768,769],{},"Attention"," : will-change est conçu pour être utilisé en dernier recours afin d'aider à la résolution de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.",[24,772,774],{"id":773},"debug","Debug",[29,776,777,778,781],{},"DevTools onglet animation ",[40,779,780],{},"CMD+P   > "," et performance pour analyser les animations.",[24,783,785],{"id":784},"a11y","A11y",[29,787,788],{},"Il existe un media query qui permet au personne de spécifier qu’ils ne veulent pas d’animation.",[29,790,791],{},"Important pour ne pas imposer des mouvements sur l’écran à des personnes qui les refusent.",[33,793,795],{"className":35,"code":794,"language":37,"meta":38,"style":38},"@media (prefers-reduced-motion: reduce) {}\n",[40,796,797],{"__ignoreMap":38},[43,798,799,802,805,807],{"class":45,"line":46},[43,800,801],{"class":193},"@media",[43,803,804],{"class":53}," (prefers-reduced-motion",[43,806,64],{"class":63},[43,808,809],{"class":53}," reduce) {}\n",[24,811,813],{"id":812},"les-liens","Les liens",[164,815,817],{"id":816},"articles","Articles",[285,819,820,826,832,838,844,851],{},[288,821,822],{},[720,823,824],{"href":824,"rel":825},"https:\u002F\u002Fweb.dev\u002Frendering-performance\u002F",[724],[288,827,828],{},[720,829,830],{"href":830,"rel":831},"https:\u002F\u002Fweb.dev\u002Fanimations-guide\u002F",[724],[288,833,834],{},[720,835,836],{"href":836,"rel":837},"https:\u002F\u002Fweb.dev\u002Fanimations-overview\u002F",[724],[288,839,840],{},[720,841,842],{"href":842,"rel":843},"https:\u002F\u002Fweb.dev\u002Fstick-to-compositor-only-properties-and-manage-layer-count\u002F",[724],[288,845,846],{},[720,847,850],{"href":848,"rel":849},"https:\u002F\u002Fwww.freecodecamp.org\u002Fnews\u002Fweb-animation-performance-fundamentals\u002F",[724],"Web Animation Performance Fundamentals – How to Make Your Pages Look Smooth (freecodecamp.org)",[288,852,853],{},[720,854,857],{"href":855,"rel":856},"https:\u002F\u002Fdassur.ma\u002Fthings\u002Fforcing-layers\u002F",[724],"Layers and how to force them — surma.dev (dassur.ma)",[164,859,861],{"id":860},"cours","Cours",[285,863,864,870],{},[288,865,866],{},[720,867,868],{"href":868,"rel":869},"https:\u002F\u002Fopenclassrooms.com\u002Ffr\u002Fcourses\u002F5919246-creez-des-animations-css-modernes",[724],[288,871,872],{},[720,873,876],{"href":874,"rel":875},"https:\u002F\u002Fwww.alsacreations.com\u002Ftuto\u002Flire\u002F1807-Motion-Path--introduction-aux-animations-CSS-modernes.html",[724],"Motion Path : introduction aux animations CSS modernes - Alsacreations",[164,878,880],{"id":879},"créer-des-animations","Créer des animations",[285,882,883,889],{},[288,884,885],{},[720,886,887],{"href":887,"rel":888},"https:\u002F\u002Fanimista.net\u002F",[724],[288,890,891],{},[720,892,893],{"href":893,"rel":894},"https:\u002F\u002Fanimate.style\u002F",[724],[29,896,897],{},"Bonne écoute !",[899,900,901],"style",{},"html pre.shiki code .sfE7D, html code.shiki .sfE7D{--shiki-default:#72F1B8}html pre.shiki code .soy-K, html code.shiki .soy-K{--shiki-default:#BBBBBB}html pre.shiki code .s2hdG, html code.shiki .s2hdG{--shiki-default:#B6B1B1}html pre.shiki code .sSmKr, html code.shiki .sSmKr{--shiki-default:#F97E72}html pre.shiki code .s1ZOD, html code.shiki .s1ZOD{--shiki-default:#D50}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 pre.shiki code .scrqX, html code.shiki .scrqX{--shiki-default:#FEDE5D}html pre.shiki code .sH7Js, html code.shiki .sH7Js{--shiki-default:#FF7EDB;--shiki-default-font-style:italic}html pre.shiki code .sFl1-, html code.shiki .sFl1-{--shiki-default:#FF8B39}",{"title":38,"searchDepth":57,"depth":57,"links":903},[904,913,916,917,918],{"id":26,"depth":57,"text":27,"children":905},[906,907,908,909,910,911,912],{"id":166,"depth":74,"text":167},{"id":173,"depth":74,"text":174},{"id":220,"depth":74,"text":221},{"id":276,"depth":74,"text":277},{"id":346,"depth":74,"text":347},{"id":491,"depth":74,"text":492},{"id":661,"depth":74,"text":662},{"id":671,"depth":57,"text":672,"children":914},[915],{"id":728,"depth":74,"text":729},{"id":773,"depth":57,"text":774},{"id":784,"depth":57,"text":785},{"id":812,"depth":57,"text":813,"children":919},[920,921,922],{"id":816,"depth":74,"text":817},{"id":860,"depth":74,"text":861},{"id":879,"depth":74,"text":880},[924],"Technology","Dans cet épisode, nous allons expliquer comment faire des animations avec CSS et comment optimiser les performances de vos animations","DS_044_animeCSS",2983,null,44,"full","md","b97a06a7fb0055a583db9b41f8fdcf7b",[],{"url":935},"https:\u002F\u002Fchtbl.com\u002Ftrack\u002F79E812\u002Fdouble-slash.ams3.cdn.digitaloceanspaces.com\u002FDS_044_animeCSS.mp3","\u002Fpodcasts\u002Fanimecss","2022-08-19",{"title":18,"description":925},"published","podcasts\u002F044.animeCSS\u002Findex","Comment faire des animations avec CSS et optimiser les performances de vos animations",[276,37],"opO05lQNKYA","nbkOorVo5fDfeDZjKqrjhB00IuXUeduoDVtEkjrhj3I",{"data":946},{"organization":947},{"sponsorsListing":948},{"name":949,"fullDescriptionHTML":950,"url":951,"shortDescription":952,"activeGoal":953,"isPublic":109,"sponsorable":957},"sponsors-double-slash-podcast","\u003Cp>Le podcast des dev pour dev par des dev !\u003C\u002Fp>\n\u003Cp>Des podcasts et des videos sur les technologie WEB modernes.\u003C\u002Fp>\n\u003Cp>A deux ou avec un invité, on discute des tendances, des nouvelles technologies, des meilleures pratiques actuelles.\u003C\u002Fp>\n\u003Cp>🎥 \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCp5DGBAX2XNJXeOVAo7bICQ\">Youtube\u003C\u002Fa>\u003Cbr>\n🎙️ \u003Ca href=\"https:\u002F\u002Fspoti.fi\u002F317wtvD\">Spotify\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fapple.co\u002F3fTguFo\">Apple Podcast\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fbit.ly\u002F3i0hDgy\">Deezer\u003C\u002Fa> ▪️ \u003Ca href=\"https:\u002F\u002Fbit.ly\u002F31aKKYd\">Google Podcast\u003C\u002Fa>\u003Cbr>\n🌐 \u003Ca href=\"https:\u002F\u002Fdouble-slash.dev\u002F\">Double Slash DEV\u003C\u002Fa>\u003C\u002Fp>","https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fdouble-slash-podcast","Le podcast des dev pour les dev par des dev !",{"description":954,"percentComplete":955,"targetValue":955,"title":956},"L'ensemble des charges seront couvertes. Service de stockage et abonnement aux services utilisés.",70,"$70 per month",{"sponsors":958},{"edges":959},[960,966,972,978,984,990,996,1002,1008,1014],{"node":961},{"id":962,"name":963,"url":964,"avatarUrl":965},"MDQ6VXNlcjEwMDMwNw==","Clément Delmas","https:\u002F\u002Fgithub.com\u002Fclem","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F100307?u=878ed4b7cdf920879b57046f19e434fea2c7d296&v=4",{"node":967},{"id":968,"name":969,"url":970,"avatarUrl":971},"MDQ6VXNlcjI3NTYwOQ==","Thibaud Lepretre","https:\u002F\u002Fgithub.com\u002Fkakawait","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F275609?v=4",{"node":973},{"id":974,"name":975,"url":976,"avatarUrl":977},"MDQ6VXNlcjE5MTQxNjA=","David Pollet","https:\u002F\u002Fgithub.com\u002Fdavidpollet","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1914160?u=4b3da16383b9fa810fd0980f756000709403ab45&v=4",{"node":979},{"id":980,"name":981,"url":982,"avatarUrl":983},"MDQ6VXNlcjYzMzMzOTY=","Eric","https:\u002F\u002Fgithub.com\u002Fericledonge","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6333396?u=e9e541a6b9125d8e8b558fdd914c847eb36db695&v=4",{"node":985},{"id":986,"name":987,"url":988,"avatarUrl":989},"MDQ6VXNlcjg4OTk3Njg=","François Gardien","https:\u002F\u002Fgithub.com\u002FYoutch","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F8899768?u=85ae8c4299c380bcec02e99e9364624f3ce333c7&v=4",{"node":991},{"id":992,"name":993,"url":994,"avatarUrl":995},"MDQ6VXNlcjEwMTc2NjI2","Antharuu","https:\u002F\u002Fgithub.com\u002Fantharuu","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10176626?u=3f6ef490b330d5a9bbaa3137560b5d1d4cf13a4a&v=4",{"node":997},{"id":998,"name":999,"url":1000,"avatarUrl":1001},"MDQ6VXNlcjEwMTg2OTkz","Adrien Zaganelli","https:\u002F\u002Fgithub.com\u002FadrienZ","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F10186993?u=08189ef8cf708a61445b6a57cf7a2aa361d484af&v=4",{"node":1003},{"id":1004,"name":1005,"url":1006,"avatarUrl":1007},"MDQ6VXNlcjI2MTQyMzgz","Thomas Lemoine","https:\u002F\u002Fgithub.com\u002Fthomaslemoine","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F26142383?u=4c68175459b0ae1f8c68c48c40f2ae148747675d&v=4",{"node":1009},{"id":1010,"name":1011,"url":1012,"avatarUrl":1013},"MDQ6VXNlcjY1NzM3MTMx","Valentin Grenier","https:\u002F\u002Fgithub.com\u002Fvalentin-grenier","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F65737131?u=0ba0cc828412f6655a948c6a82f69b9c909f8fd9&v=4",{"node":1015},{"id":1016,"name":1017,"url":1018,"avatarUrl":1019},"U_kgDOBipZwA","Hebrard Frederic","https:\u002F\u002Fgithub.com\u002Ffrederichebrard","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F103438784?v=4",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1021},"\u003Cpath fill=\"currentColor\" d=\"M4 21V9l8-6l8 6v12h-6v-7h-4v7z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1023},"\u003Cpath fill=\"currentColor\" d=\"M12 2C6.475 2 2 6.475 2 12s4.475 10 10 10s10-4.475 10-10S17.525 2 12 2m-2 14.5v-9l6 4.5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1025},"\u003Cpath fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h3v2H6v10h12V10h-3V8h3q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm5-6V4.825l-1.6 1.6L8 5l4-4l4 4l-1.4 1.425l-1.6-1.6V16z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1027},"\u003Cpath fill=\"currentColor\" d=\"M18.774 5.051c.185-1.072.457-1.747.757-1.748c.561 0 1.015 2.341 1.015 5.228s-.455 5.229-1.016 5.229c-.23 0-.443-.4-.614-1.064c-.27 2.439-.831 4.115-1.48 4.115c-.5 0-.953-1.007-1.256-2.594c-.207 3.018-.727 5.161-1.334 5.161c-.381 0-.73-.848-.987-2.231C13.55 20 12.834 22 12 22s-1.551-2-1.86-4.853c-.255 1.383-.6 2.231-.986 2.231c-.609 0-1.128-2.142-1.335-5.161c-.3 1.587-.752 2.594-1.256 2.594c-.649 0-1.21-1.676-1.481-4.115c-.169.668-.382 1.064-.613 1.064c-.562 0-1.017-2.34-1.017-5.229S3.908 3.3 4.471 3.3c.3 0 .57.676.758 1.748C5.527 3.2 6.014 2 6.564 2c.653 0 1.219 1.7 1.487 4.168c.262-1.8.658-2.941 1.1-2.941c.624 0 1.154 2.252 1.351 5.393C10.874 7.01 11.41 6 12 6s1.128 1.011 1.5 2.62c.2-3.141.727-5.393 1.351-5.393c.444 0 .84 1.145 1.1 2.941C16.219 3.7 16.785 2 17.439 2c.547 0 1.035 1.2 1.335 3.051m-16.2 5.3C2.258 10.355 2 9.31 2 8.017s.258-2.337.576-2.337s.578 1.044.578 2.337s-.254 2.338-.578 2.338Zm18.848 0c-.32 0-.577-1.045-.577-2.338s.257-2.337.577-2.337S22 6.724 22 8.017s-.258 2.338-.576 2.338Z\"\u002F>",{"left":4,"top":4,"width":1029,"height":1029,"rotate":4,"vFlip":6,"hFlip":6,"body":1030},32,"\u003Cdefs>\u003ClinearGradient id=\"SVGvSi4fdXe\" x1=\"30.06\" x2=\"225.94\" y1=\"30.06\" y2=\"225.94\" gradientTransform=\"matrix(.11 0 0 .11 2 2)\" gradientUnits=\"userSpaceOnUse\">\u003Cstop offset=\"0\" stop-color=\"#e3702d\"\u002F>\u003Cstop offset=\".11\" stop-color=\"#ea7d31\"\u002F>\u003Cstop offset=\".35\" stop-color=\"#f69537\"\u002F>\u003Cstop offset=\".5\" stop-color=\"#fb9e3a\"\u002F>\u003Cstop offset=\".7\" stop-color=\"#ea7c31\"\u002F>\u003Cstop offset=\".89\" stop-color=\"#de642b\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#d95b29\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\u003Crect width=\"28\" height=\"28\" x=\"2\" y=\"2\" fill=\"#cc5d15\" rx=\"6.01\" ry=\"6.01\"\u002F>\u003Crect width=\"26.91\" height=\"26.91\" x=\"2.54\" y=\"2.54\" fill=\"#f49c52\" rx=\"5.47\" ry=\"5.47\"\u002F>\u003Crect width=\"25.82\" height=\"25.82\" x=\"3.1\" y=\"3.1\" fill=\"url(#SVGvSi4fdXe)\" rx=\"5.14\" ry=\"5.14\"\u002F>\u003Cpath fill=\"#fff\" d=\"M6.82 6.16v3.83a15.31 15.31 0 0 1 15.3 15.3h3.83A19.14 19.14 0 0 0 6.81 6.17zm0 6.45v3.72a8.97 8.97 0 0 1 8.96 8.97h3.72A12.69 12.69 0 0 0 6.81 12.6zm2.62 7.44a2.63 2.63 0 0 0-2.63 2.62a2.63 2.63 0 0 0 2.63 2.63a2.63 2.63 0 0 0 2.63-2.63a2.63 2.63 0 0 0-2.63-2.63z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1032},"\u003Cpath fill=\"currentColor\" d=\"M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2\"\u002F>",["Island",1034],{"key":1035,"result":1036},"Brand_dlIOZD2O03VXPoFYukMOJnSnZRMTmJ0YwMKY5fNK8",{"head":1037},{},["Island",1039],{"key":1040,"result":1041},"Duration_OaBT5oji4n5zkmw7gDlQwMezbXLpfKDogHSkNY9i4",{"head":1042},{},1785405178097]