[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation":1442,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation":1468},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":1438,"stem":1439,"id":1440,"extension":1441},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","transform 改变元素视觉几何但不改变文档流占位（周围元素布局不变）；transition 在两种状态间插值；animation 用 @keyframes 定义多关键帧序列。与 视觉效果 中的滤镜、裁剪可组合使用。","技能小册",[12,13],"css","animation","2023-01-09",false,{"type":17,"value":18,"toc":1421},"minimark",[19,23,48,56,72,77,159,168,223,389,393,424,511,533,539,550,657,722,749,758,761,889,1003,1015,1021,1038,1134,1138,1156,1159,1236,1239,1302,1305,1308,1417],[20,21,8],"h1",{"id":22},"变换过渡与动画",[24,25,26,30,31,34,35,37,38,41,42,47],"p",{},[27,28,29],"code",{},"transform"," 改变元素视觉几何但不改变文档流占位（周围元素布局不变）；",[27,32,33],{},"transition"," 在两种状态间插值；",[27,36,13],{}," 用 ",[27,39,40],{},"@keyframes"," 定义多关键帧序列。与 ",[43,44,46],"a",{"href":45},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果"," 中的滤镜、裁剪可组合使用。",[49,50,52,53,55],"h2",{"id":51},"变换transform","变换（",[27,54,29],{},"）",[24,57,58,59,63,64,67,68,71],{},"在",[60,61,62],"strong",{},"局部坐标系","中应用；默认变换原点为 ",[27,65,66],{},"transform-origin: center","（可改为 ",[27,69,70],{},"top left"," 等）。",[73,74,76],"h3",{"id":75},"_2d","2D",[78,79,80,93],"table",{},[81,82,83],"thead",{},[84,85,86,90],"tr",{},[87,88,89],"th",{},"函数",[87,91,92],{},"说明",[94,95,96,111,125,139,149],"tbody",{},[84,97,98,108],{},[99,100,101,104,105],"td",{},[27,102,103],{},"translate(x, y)"," \u002F ",[27,106,107],{},"translateX\u002FY",[99,109,110],{},"平移",[84,112,113,118],{},[99,114,115],{},[27,116,117],{},"rotate(angle)",[99,119,120,121,124],{},"旋转；正值为",[60,122,123],{},"顺时针","（2D）",[84,126,127,132],{},[99,128,129],{},[27,130,131],{},"scale(sx, sy)",[99,133,134,135,138],{},"缩放，",[27,136,137],{},"1"," 为原始大小",[84,140,141,146],{},[99,142,143],{},[27,144,145],{},"skew(ax, ay)",[99,147,148],{},"倾斜",[84,150,151,156],{},[99,152,153],{},[27,154,155],{},"matrix(...)",[99,157,158],{},"矩阵组合",[24,160,161,164,165,167],{},[60,162,163],{},"独立变换属性","（与 ",[27,166,29],{}," 函数可组合，便于单独过渡某一维）：",[78,169,170,179],{},[81,171,172],{},[84,173,174,177],{},[87,175,176],{},"属性",[87,178,92],{},[94,180,181,199,213],{},[84,182,183,197],{},[99,184,185,104,188,104,191,104,194],{},[27,186,187],{},"translate",[27,189,190],{},"translateX",[27,192,193],{},"translateY",[27,195,196],{},"translateZ",[99,198,110],{},[84,200,201,206],{},[99,202,203],{},[27,204,205],{},"rotate",[99,207,208,209,212],{},"2D\u002F3D 旋转（含 ",[27,210,211],{},"rotateX"," 等轴属性）",[84,214,215,220],{},[99,216,217],{},[27,218,219],{},"scale",[99,221,222],{},"缩放",[224,225,229],"pre",{"className":226,"code":227,"language":12,"meta":228,"style":228},"language-css shiki shiki-themes material-theme-lighter github-light github-dark",".card:hover {\n    transform: translateY(-4px) scale(1.02);\n}\n.panel {\n    translate: 0 0;\n    transition: translate 0.3s ease;\n}\n.panel.is-open {\n    translate: 0 -8px;\n}\n","",[27,230,231,255,293,299,309,325,349,354,368,384],{"__ignoreMap":228},[232,233,236,240,244,247,251],"span",{"class":234,"line":235},"line",1,[232,237,239],{"class":238},"stp6e",".",[232,241,243],{"class":242},"sbgvK","card",[232,245,246],{"class":238},":",[232,248,250],{"class":249},"s9AJx","hover",[232,252,254],{"class":253},"sP7_E"," {\n",[232,256,258,262,264,268,271,275,279,282,285,287,290],{"class":234,"line":257},2,[232,259,261],{"class":260},"soE4H","    transform",[232,263,246],{"class":253},[232,265,267],{"class":266},"sptTA"," translateY",[232,269,270],{"class":253},"(",[232,272,274],{"class":273},"srdBf","-4",[232,276,278],{"class":277},"sw1J6","px",[232,280,281],{"class":253},")",[232,283,284],{"class":266}," scale",[232,286,270],{"class":253},[232,288,289],{"class":273},"1.02",[232,291,292],{"class":253},");\n",[232,294,296],{"class":234,"line":295},3,[232,297,298],{"class":253},"}\n",[232,300,302,304,307],{"class":234,"line":301},4,[232,303,239],{"class":238},[232,305,306],{"class":242},"panel",[232,308,254],{"class":253},[232,310,312,315,317,320,322],{"class":234,"line":311},5,[232,313,314],{"class":260},"    translate",[232,316,246],{"class":253},[232,318,319],{"class":273}," 0",[232,321,319],{"class":273},[232,323,324],{"class":253},";\n",[232,326,328,331,333,337,340,343,347],{"class":234,"line":327},6,[232,329,330],{"class":260},"    transition",[232,332,246],{"class":253},[232,334,336],{"class":335},"su5hD"," translate ",[232,338,339],{"class":273},"0.3",[232,341,342],{"class":277},"s",[232,344,346],{"class":345},"s_hVV"," ease",[232,348,324],{"class":253},[232,350,352],{"class":234,"line":351},7,[232,353,298],{"class":253},[232,355,357,359,361,363,366],{"class":234,"line":356},8,[232,358,239],{"class":238},[232,360,306],{"class":242},[232,362,239],{"class":238},[232,364,365],{"class":242},"is-open",[232,367,254],{"class":253},[232,369,371,373,375,377,380,382],{"class":234,"line":370},9,[232,372,314],{"class":260},[232,374,246],{"class":253},[232,376,319],{"class":273},[232,378,379],{"class":273}," -8",[232,381,278],{"class":277},[232,383,324],{"class":253},[232,385,387],{"class":234,"line":386},10,[232,388,298],{"class":253},[73,390,392],{"id":391},"_3d","3D",[394,395,396,408,415],"ul",{},[397,398,399,400,403,404,407],"li",{},"父级设置 ",[27,401,402],{},"perspective","（如 ",[27,405,406],{},"perspective: 800px","）才有「近大远小」。",[397,409,410,411,414],{},"子级 ",[27,412,413],{},"transform-style: preserve-3d"," 保留子元素 3D 空间（否则会被压平）。",[397,416,417,418,104,421,423],{},"使用 ",[27,419,420],{},"translate3d",[27,422,211],{}," 等可触发 GPU 合成。",[224,425,427],{"className":226,"code":426,"language":12,"meta":228,"style":228},".scene {\n    perspective: 500px;\n}\n.cube {\n    transform-style: preserve-3d;\n    transform: rotateX(45deg) rotateY(45deg);\n}\n",[27,428,429,438,452,456,465,477,507],{"__ignoreMap":228},[232,430,431,433,436],{"class":234,"line":235},[232,432,239],{"class":238},[232,434,435],{"class":242},"scene",[232,437,254],{"class":253},[232,439,440,443,445,448,450],{"class":234,"line":257},[232,441,442],{"class":260},"    perspective",[232,444,246],{"class":253},[232,446,447],{"class":273}," 500",[232,449,278],{"class":277},[232,451,324],{"class":253},[232,453,454],{"class":234,"line":295},[232,455,298],{"class":253},[232,457,458,460,463],{"class":234,"line":301},[232,459,239],{"class":238},[232,461,462],{"class":242},"cube",[232,464,254],{"class":253},[232,466,467,470,472,475],{"class":234,"line":311},[232,468,469],{"class":260},"    transform-style",[232,471,246],{"class":253},[232,473,474],{"class":345}," preserve-3d",[232,476,324],{"class":253},[232,478,479,481,483,486,488,491,494,496,499,501,503,505],{"class":234,"line":327},[232,480,261],{"class":260},[232,482,246],{"class":253},[232,484,485],{"class":266}," rotateX",[232,487,270],{"class":253},[232,489,490],{"class":273},"45",[232,492,493],{"class":277},"deg",[232,495,281],{"class":253},[232,497,498],{"class":266}," rotateY",[232,500,270],{"class":253},[232,502,490],{"class":273},[232,504,493],{"class":277},[232,506,292],{"class":253},[232,508,509],{"class":234,"line":351},[232,510,298],{"class":253},[512,513,514],"blockquote",{},[24,515,516,517,519,520,523,524,527,528,532],{},"定位元素 ",[27,518,29],{}," 非 ",[27,521,522],{},"none"," 时，会成为 ",[27,525,526],{},"fixed"," 子元素的包含块参照之一（与 ",[43,529,531],{"href":530},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位"," 相关）。",[49,534,536,537,55],{"id":535},"过渡transition","过渡（",[27,538,33],{},[24,540,541,542,545,546,549],{},"在属性",[60,543,544],{},"计算值变化","时插值（需触发：",[27,547,548],{},":hover","、类名切换等）。",[224,551,553],{"className":226,"code":552,"language":12,"meta":228,"style":228},".button {\n    background-color: blue;\n    transition:\n        background-color 0.5s ease,\n        transform 0.3s ease;\n}\n.button:hover {\n    background-color: red;\n    transform: scale(1.05);\n}\n",[27,554,555,564,576,583,598,611,615,627,638,653],{"__ignoreMap":228},[232,556,557,559,562],{"class":234,"line":235},[232,558,239],{"class":238},[232,560,561],{"class":242},"button",[232,563,254],{"class":253},[232,565,566,569,571,574],{"class":234,"line":257},[232,567,568],{"class":260},"    background-color",[232,570,246],{"class":253},[232,572,573],{"class":345}," blue",[232,575,324],{"class":253},[232,577,578,580],{"class":234,"line":295},[232,579,330],{"class":260},[232,581,582],{"class":253},":\n",[232,584,585,588,591,593,595],{"class":234,"line":301},[232,586,587],{"class":335},"        background-color ",[232,589,590],{"class":273},"0.5",[232,592,342],{"class":277},[232,594,346],{"class":345},[232,596,597],{"class":253},",\n",[232,599,600,603,605,607,609],{"class":234,"line":311},[232,601,602],{"class":335},"        transform ",[232,604,339],{"class":273},[232,606,342],{"class":277},[232,608,346],{"class":345},[232,610,324],{"class":253},[232,612,613],{"class":234,"line":327},[232,614,298],{"class":253},[232,616,617,619,621,623,625],{"class":234,"line":351},[232,618,239],{"class":238},[232,620,561],{"class":242},[232,622,246],{"class":238},[232,624,250],{"class":249},[232,626,254],{"class":253},[232,628,629,631,633,636],{"class":234,"line":356},[232,630,568],{"class":260},[232,632,246],{"class":253},[232,634,635],{"class":345}," red",[232,637,324],{"class":253},[232,639,640,642,644,646,648,651],{"class":234,"line":370},[232,641,261],{"class":260},[232,643,246],{"class":253},[232,645,284],{"class":266},[232,647,270],{"class":253},[232,649,650],{"class":273},"1.05",[232,652,292],{"class":253},[232,654,655],{"class":234,"line":386},[232,656,298],{"class":253},[78,658,659,669],{},[81,660,661],{},[84,662,663,666],{},[87,664,665],{},"子属性",[87,667,668],{},"含义",[94,670,671,685,695,712],{},[84,672,673,678],{},[99,674,675],{},[27,676,677],{},"transition-property",[99,679,680,681,684],{},"参与过渡的属性，",[27,682,683],{},"all"," 或列表",[84,686,687,692],{},[99,688,689],{},[27,690,691],{},"transition-duration",[99,693,694],{},"时长",[84,696,697,702],{},[99,698,699],{},[27,700,701],{},"transition-timing-function",[99,703,704,705,708,709,55],{},"曲线（",[27,706,707],{},"ease","、",[27,710,711],{},"cubic-bezier(...)",[84,713,714,719],{},[99,715,716],{},[27,717,718],{},"transition-delay",[99,720,721],{},"延迟",[394,723,724,738],{},[397,725,726,727,730,731,708,734,737],{},"仅能在",[60,728,729],{},"起止两态","间过渡；",[27,732,733],{},"auto",[27,735,736],{},"fit-content"," 等往往无法平滑插值。",[397,739,740,741,744,745,748],{},"事件：",[27,742,743],{},"transitionend","（注意 ",[27,746,747],{},"propertyName","）。",[49,750,752,753,755,756,55],{"id":751},"动画animation-keyframes","动画（",[27,754,13],{}," + ",[27,757,40],{},[24,759,760],{},"可自动播放、循环、反向，定义任意中间关键帧。",[224,762,764],{"className":226,"code":763,"language":12,"meta":228,"style":228},"@keyframes bounce {\n    0%,\n    100% {\n        transform: translateY(0);\n    }\n    50% {\n        transform: translateY(-50px);\n    }\n}\n\n.ball {\n    animation: bounce 2s ease-in-out infinite;\n}\n",[27,765,766,777,784,791,807,812,819,836,840,844,850,860,884],{"__ignoreMap":228},[232,767,768,771,775],{"class":234,"line":235},[232,769,40],{"class":770},"sVHd0",[232,772,774],{"class":773},"s99_P"," bounce",[232,776,254],{"class":253},[232,778,779,782],{"class":234,"line":257},[232,780,781],{"class":242},"    0%",[232,783,597],{"class":335},[232,785,786,789],{"class":234,"line":295},[232,787,788],{"class":242},"    100%",[232,790,254],{"class":253},[232,792,793,796,798,800,802,805],{"class":234,"line":301},[232,794,795],{"class":260},"        transform",[232,797,246],{"class":253},[232,799,267],{"class":266},[232,801,270],{"class":253},[232,803,804],{"class":273},"0",[232,806,292],{"class":253},[232,808,809],{"class":234,"line":311},[232,810,811],{"class":253},"    }\n",[232,813,814,817],{"class":234,"line":327},[232,815,816],{"class":242},"    50%",[232,818,254],{"class":253},[232,820,821,823,825,827,829,832,834],{"class":234,"line":351},[232,822,795],{"class":260},[232,824,246],{"class":253},[232,826,267],{"class":266},[232,828,270],{"class":253},[232,830,831],{"class":273},"-50",[232,833,278],{"class":277},[232,835,292],{"class":253},[232,837,838],{"class":234,"line":356},[232,839,811],{"class":253},[232,841,842],{"class":234,"line":370},[232,843,298],{"class":253},[232,845,846],{"class":234,"line":386},[232,847,849],{"emptyLinePlaceholder":848},true,"\n",[232,851,853,855,858],{"class":234,"line":852},11,[232,854,239],{"class":238},[232,856,857],{"class":242},"ball",[232,859,254],{"class":253},[232,861,863,866,868,871,874,876,879,882],{"class":234,"line":862},12,[232,864,865],{"class":260},"    animation",[232,867,246],{"class":253},[232,869,870],{"class":335}," bounce ",[232,872,873],{"class":273},"2",[232,875,342],{"class":277},[232,877,878],{"class":345}," ease-in-out",[232,880,881],{"class":345}," infinite",[232,883,324],{"class":253},[232,885,887],{"class":234,"line":886},13,[232,888,298],{"class":253},[78,890,891,899],{},[81,892,893],{},[84,894,895,897],{},[87,896,665],{},[87,898,668],{},[94,900,901,914,924,934,943,957,975,988],{},[84,902,903,908],{},[99,904,905],{},[27,906,907],{},"animation-name",[99,909,910,911,913],{},"对应 ",[27,912,40],{}," 名称",[84,915,916,921],{},[99,917,918],{},[27,919,920],{},"animation-duration",[99,922,923],{},"周期时长",[84,925,926,931],{},[99,927,928],{},[27,929,930],{},"animation-timing-function",[99,932,933],{},"速度曲线",[84,935,936,941],{},[99,937,938],{},[27,939,940],{},"animation-delay",[99,942,721],{},[84,944,945,950],{},[99,946,947],{},[27,948,949],{},"animation-iteration-count",[99,951,952,953,956],{},"次数，",[27,954,955],{},"infinite"," 无限",[84,958,959,964],{},[99,960,961],{},[27,962,963],{},"animation-direction",[99,965,966,104,969,104,972],{},[27,967,968],{},"normal",[27,970,971],{},"reverse",[27,973,974],{},"alternate",[84,976,977,982],{},[99,978,979],{},[27,980,981],{},"animation-fill-mode",[99,983,984,987],{},[27,985,986],{},"forwards"," 保持末帧等",[84,989,990,995],{},[99,991,992],{},[27,993,994],{},"animation-play-state",[99,996,997,104,1000],{},[27,998,999],{},"paused",[27,1001,1002],{},"running",[24,1004,740,1005,708,1008,708,1011,1014],{},[27,1006,1007],{},"animationstart",[27,1009,1010],{},"animationiteration",[27,1012,1013],{},"animationend","。",[73,1016,1018],{"id":1017},"starting-style",[27,1019,1020],{},"@starting-style",[24,1022,1023,1024,1027,1028,1031,1032,1034,1035,1037],{},"为元素",[60,1025,1026],{},"首次插入文档","或 ",[27,1029,1030],{},"display"," 从 ",[27,1033,522],{}," 变为可见时定义「起始样式」，与 ",[27,1036,33],{}," 配合实现入场动画（无需仅靠 JS 设初始类名）。",[224,1039,1041],{"className":226,"code":1040,"language":12,"meta":228,"style":228},".dialog {\n    transition: opacity 0.3s ease, transform 0.3s ease;\n}\n@starting-style {\n    .dialog {\n        opacity: 0;\n        transform: scale(0.95);\n    }\n}\n",[27,1042,1043,1052,1081,1085,1091,1100,1111,1126,1130],{"__ignoreMap":228},[232,1044,1045,1047,1050],{"class":234,"line":235},[232,1046,239],{"class":238},[232,1048,1049],{"class":242},"dialog",[232,1051,254],{"class":253},[232,1053,1054,1056,1058,1061,1063,1065,1067,1070,1073,1075,1077,1079],{"class":234,"line":257},[232,1055,330],{"class":260},[232,1057,246],{"class":253},[232,1059,1060],{"class":335}," opacity ",[232,1062,339],{"class":273},[232,1064,342],{"class":277},[232,1066,346],{"class":345},[232,1068,1069],{"class":253},",",[232,1071,1072],{"class":335}," transform ",[232,1074,339],{"class":273},[232,1076,342],{"class":277},[232,1078,346],{"class":345},[232,1080,324],{"class":253},[232,1082,1083],{"class":234,"line":295},[232,1084,298],{"class":253},[232,1086,1087,1089],{"class":234,"line":301},[232,1088,1020],{"class":770},[232,1090,254],{"class":253},[232,1092,1093,1096,1098],{"class":234,"line":311},[232,1094,1095],{"class":238},"    .",[232,1097,1049],{"class":242},[232,1099,254],{"class":253},[232,1101,1102,1105,1107,1109],{"class":234,"line":327},[232,1103,1104],{"class":260},"        opacity",[232,1106,246],{"class":253},[232,1108,319],{"class":273},[232,1110,324],{"class":253},[232,1112,1113,1115,1117,1119,1121,1124],{"class":234,"line":351},[232,1114,795],{"class":260},[232,1116,246],{"class":253},[232,1118,284],{"class":266},[232,1120,270],{"class":253},[232,1122,1123],{"class":273},"0.95",[232,1125,292],{"class":253},[232,1127,1128],{"class":234,"line":356},[232,1129,811],{"class":253},[232,1131,1132],{"class":234,"line":370},[232,1133,298],{"class":253},[73,1135,1137],{"id":1136},"滚动驱动动画概要","滚动驱动动画（概要）",[24,1139,1140,1141,1144,1145,1151,1152,1014],{},"通过 ",[27,1142,1143],{},"animation-timeline: scroll()"," 等将动画进度绑定到滚动位置，适用于进度条、视差等；语法与浏览器支持见 ",[43,1146,1150],{"href":1147,"rel":1148},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_scroll-driven_animations",[1149],"nofollow","MDN：滚动驱动动画","（英文）与 ",[43,1153,1155],{"href":1154},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 概览",[49,1157,1158],{"id":1158},"对比总表",[78,1160,1161,1173],{},[81,1162,1163],{},[84,1164,1165,1167,1169,1171],{},[87,1166],{},[87,1168,29],{},[87,1170,33],{},[87,1172,13],{},[94,1174,1175,1189,1203,1217],{},[84,1176,1177,1180,1183,1186],{},[99,1178,1179],{},"作用",[99,1181,1182],{},"单帧几何状态",[99,1184,1185],{},"两态之间平滑变化",[99,1187,1188],{},"多关键帧、可循环",[84,1190,1191,1194,1197,1200],{},[99,1192,1193],{},"触发",[99,1195,1196],{},"立即或随动画\u002F过渡",[99,1198,1199],{},"属性值变化时",[99,1201,1202],{},"常自动播放",[84,1204,1205,1208,1211,1214],{},[99,1206,1207],{},"布局",[99,1209,1210],{},"不改变流内占位",[99,1212,1213],{},"若过渡 layout 属性会触发布局",[99,1215,1216],{},"同左",[84,1218,1219,1222,1231,1234],{},[99,1220,1221],{},"性能",[99,1223,1224,1226,1227,1230],{},[27,1225,29],{},"\u002F",[27,1228,1229],{},"opacity"," 宜合成",[99,1232,1233],{},"避免过渡 width\u002Ftop 等",[99,1235,1216],{},[49,1237,1238],{"id":1238},"最佳实践",[1240,1241,1242,1270,1278,1285,1295],"ol",{},[397,1243,1244,1247,1248,1250,1251,1253,1254,708,1257,708,1260,708,1263,708,1266,1269],{},[60,1245,1246],{},"优先动画化"," ",[27,1249,29],{}," 与 ",[27,1252,1229],{},"，避免 ",[27,1255,1256],{},"width",[27,1258,1259],{},"height",[27,1261,1262],{},"top",[27,1264,1265],{},"left",[27,1267,1268],{},"margin"," 等触发布局（layout）的属性。",[397,1271,1272,1273,1275,1276,1014],{},"简单交互用 ",[60,1274,33],{},"；加载、循环、复杂路径用 ",[60,1277,13],{},[397,1279,1280,1281,1014],{},"3D 记得父级 ",[60,1282,1283],{},[27,1284,402],{},[397,1286,1287,1290,1291,1294],{},[60,1288,1289],{},"无障碍","：提供 ",[27,1292,1293],{},"@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }"," 或等价降级（勿破坏必要反馈）。",[397,1296,1297,1298,1301],{},"必要时 ",[27,1299,1300],{},"will-change: transform"," 提示合成（勿滥用，动画结束可移除）。",[49,1303,1304],{"id":1304},"参考文献",[24,1306,1307],{},"以下链接在编写时均可正常访问：",[78,1309,1310,1319],{},[81,1311,1312],{},[84,1313,1314,1317],{},[87,1315,1316],{},"资料",[87,1318,92],{},[94,1320,1321,1333,1345,1357,1369,1381,1393,1405],{},[84,1322,1323,1330],{},[99,1324,1325],{},[43,1326,1329],{"href":1327,"rel":1328},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Ftransform",[1149],"MDN：transform",[99,1331,1332],{},"2D\u002F3D 变换",[84,1334,1335,1342],{},[99,1336,1337],{},[43,1338,1341],{"href":1339,"rel":1340},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Ftransition",[1149],"MDN：transition",[99,1343,1344],{},"过渡",[84,1346,1347,1354],{},[99,1348,1349],{},[43,1350,1353],{"href":1351,"rel":1352},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_animations\u002FUsing_CSS_animations",[1149],"MDN：使用 CSS 动画",[99,1355,1356],{},"@keyframes 与 animation",[84,1358,1359,1366],{},[99,1360,1361],{},[43,1362,1365],{"href":1363,"rel":1364},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002F@media\u002Fprefers-reduced-motion",[1149],"MDN：prefers-reduced-motion",[99,1367,1368],{},"减少动效偏好",[84,1370,1371,1378],{},[99,1372,1373],{},[43,1374,1377],{"href":1375,"rel":1376},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-transforms-2\u002F",[1149],"W3C：CSS Transforms Level 2",[99,1379,1380],{},"变换规范（英文）",[84,1382,1383,1390],{},[99,1384,1385],{},[43,1386,1389],{"href":1387,"rel":1388},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-animations-1\u002F",[1149],"W3C：CSS Animations Level 1",[99,1391,1392],{},"动画规范（英文）",[84,1394,1395,1402],{},[99,1396,1397],{},[43,1398,1401],{"href":1399,"rel":1400},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@starting-style",[1149],"MDN：@starting-style",[99,1403,1404],{},"入场起始样式（英文）",[84,1406,1407,1414],{},[99,1408,1409],{},[43,1410,1413],{"href":1411,"rel":1412},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Ftranslate",[1149],"MDN：translate",[99,1415,1416],{},"独立平移属性",[1418,1419,1420],"style",{},"html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sptTA, html code.shiki .sptTA{--shiki-light:#6182B8;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}",{"title":228,"searchDepth":257,"depth":257,"links":1422},[1423,1428,1430,1435,1436,1437],{"id":51,"depth":257,"text":1424,"children":1425},"变换（transform）",[1426,1427],{"id":75,"depth":295,"text":76},{"id":391,"depth":295,"text":392},{"id":535,"depth":257,"text":1429},"过渡（transition）",{"id":751,"depth":257,"text":1431,"children":1432},"动画（animation + @keyframes）",[1433,1434],{"id":1017,"depth":295,"text":1020},{"id":1136,"depth":295,"text":1137},{"id":1158,"depth":257,"text":1158},{"id":1238,"depth":257,"text":1238},{"id":1304,"depth":257,"text":1304},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fanimation","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fanimation.md","md",{"items":1443},[1444,1448,1452,1456,1460,1464],{"path":1445,"title":1446,"description":1447,"category":10,"score":327},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1449,"title":1450,"description":1451,"category":10,"score":327},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1453,"title":1454,"description":1455,"category":10,"score":327},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":1457,"title":1458,"description":1459,"category":10,"score":327},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1461,"title":1462,"description":1463,"category":10,"score":327},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1465,"title":1466,"description":1467,"category":10,"score":327},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1469,"title":12,"items":1470,"index":1527,"prev":1528,"next":1529},"booklet\u002Fweb\u002Fcss",[1471,1472,1474,1478,1482,1486,1490,1494,1498,1502,1504,1508,1511,1513,1517,1521,1522,1523,1524,1525],{"path":7,"title":8,"date":14,"pinned":15},{"path":1465,"title":1466,"date":1473,"pinned":15},"2025-05-01",{"path":1475,"title":1476,"date":1477,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":1479,"title":1480,"date":1481,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":1483,"title":1484,"date":1485,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","弹性盒子","2020-09-29",{"path":1487,"title":1488,"date":1489,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":1491,"title":1492,"date":1493,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":1495,"title":1496,"date":1497,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","网格布局","2020-11-09",{"path":1499,"title":1500,"date":1501,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":1445,"title":1446,"date":1503,"pinned":15},"2026-07-23",{"path":1505,"title":1506,"date":1507,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","2023-09-04",{"path":1154,"title":1509,"date":1510,"pinned":15},"现代 CSS 特性概览","2021-11-09",{"path":530,"title":531,"date":1512,"pinned":15},"2022-11-08",{"path":1514,"title":1515,"date":1516,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":1518,"title":1519,"date":1520,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":1449,"title":1450,"date":1503,"pinned":15},{"path":1453,"title":1454,"date":1503,"pinned":15},{"path":1457,"title":1458,"date":1503,"pinned":15},{"path":1461,"title":1462,"date":1503,"pinned":15},{"path":45,"title":46,"date":1526,"pinned":15},"2021-11-04",0,null,{"path":1465,"title":1466,"date":1473,"pinned":15}]