1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[1993],{47928:(n,e,i)=>{i.r(e),i.d(e,{assets:()=>t,contentTitle:()=>o,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"day_series/02-2024_ithome/day_04","title":"Day 04 - animation vs transition","description":"\u4eca\u5929\u7684\u4e3b\u984c\u662f\u7a0d\u5fae\u4f86\u89e3\u500b\u60d1\u3002\u4ec0\u9ebc\u7591\u60d1\u5462\uff1f","source":"@site/docs/30_day_series/02-2024_ithome/05-day_04.mdx","sourceDirName":"30_day_series/02-2024_ithome","slug":"/day_series/02-2024_ithome/day_04","permalink":"/docs/day_series/02-2024_ithome/day_04","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"title":"Day 04 - animation vs transition"},"sidebar":"thirtySeriesSidebar","previous":{"title":"Day 03 - \u8907\u5408\u52d5\u756b","permalink":"/docs/day_series/02-2024_ithome/day_03"},"next":{"title":"Day 05 - 3D \u8b8a\u5f62","permalink":"/docs/day_series/02-2024_ithome/day_05"}}');var c=i(74848),d=i(28453);const r={title:"Day 04 - animation vs transition"},o=void 0,t={},l=[{value:"<code>transition</code> vs <code>animation</code>",id:"transition-vs-animation",level:2},{value:"\u8907\u96dc\u5ea6\u8207\u53ef\u63a7\u6027",id:"\u8907\u96dc\u5ea6\u8207\u53ef\u63a7\u6027",level:3},{value:"\u89f8\u767c\u65b9\u5f0f",id:"\u89f8\u767c\u65b9\u5f0f",level:3},{value:"\u91cd\u8907\u6027",id:"\u91cd\u8907\u6027",level:3},{value:"\u7d50\u8a9e",id:"\u7d50\u8a9e",level:2}];function a(n){const e={blockquote:"blockquote",br:"br",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,d.R)(),...n.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(e.p,{children:["\u4eca\u5929\u7684\u4e3b\u984c\u662f\u7a0d\u5fae\u4f86\u89e3\u500b\u60d1\u3002\u4ec0\u9ebc\u7591\u60d1\u5462\uff1f",(0,c.jsx)(e.br,{}),"\n","\u5728\u524d\u9762\u7684\u6587\u7ae0\u4e2d\uff0c\u8aaa\u904e\uff1a"]}),"\n",(0,c.jsxs)(e.blockquote,{children:["\n",(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:"@keyframes"})," \u8207 ",(0,c.jsx)(e.code,{children:"animation"})," \u8ca0\u8cac\u63a7\u5236\u52d5\u756b\u7684\u6642\u9593\u8207\u9032\u5ea6\u3002"]}),"\n"]}),"\n",(0,c.jsxs)(e.p,{children:["\u4f46\u6211\u5011\u5728\u7b2c\u4e8c\u5929\u7684 CSS \u8b8a\u5f62\u57fa\u790e\u4e2d\u6709\u8ac7\u5230\u4e00\u500b CSS \u5c6c\u6027 ",(0,c.jsx)(e.code,{children:"transition"}),"\uff0c\u8db3\u5920\u7d30\u5fc3\u4f60\u6703\u767c\u73fe\u4ed6\u7684\u8a9e\u6cd5\u8ddf ",(0,c.jsx)(e.code,{children:"animation"})," \u5e7e\u4e4e\u5b8c\u5168\u4e00\u81f4\u3002",(0,c.jsx)(e.br,{}),"\n","\u6240\u4ee5 ",(0,c.jsx)(e.code,{children:"transition"})," \u8ddf ",(0,c.jsx)(e.code,{children:"animation"})," \u5230\u5e95\u6709\u4ec0\u9ebc\u5dee\u5225\u5462\uff1f"]}),"\n",(0,c.jsxs)(e.h2,{id:"transition-vs-animation",children:[(0,c.jsx)(e.code,{children:"transition"})," vs ",(0,c.jsx)(e.code,{children:"animation"})]}),"\n",(0,c.jsxs)(e.p,{children:["\u5176\u5be6\u6700\u7c21\u55ae\u7684\u5dee\u5225\u5728\u65bc ",(0,c.jsx)(e.code,{children:"transition"})," \u63a5\u53d7\u7684\u5c6c\u6027\u9060\u6bd4 ",(0,c.jsx)(e.code,{children:"animation"})," \u5c11\u3002",(0,c.jsx)(e.br,{}),"\n","\u5f9e\u524d\u9762\u6587\u7ae0\u53ef\u4ee5\u77e5\u9053 ",(0,c.jsx)(e.code,{children:"transition"})," \u53ef\u4ee5\u8abf\u63a7\u7684\u53ea\u6709\uff1a"]}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsx)(e.li,{children:(0,c.jsx)(e.code,{children:"property"})}),"\n",(0,c.jsx)(e.li,{children:(0,c.jsx)(e.code,{children:"duration"})}),"\n",(0,c.jsx)(e.li,{children:(0,c.jsx)(e.code,{children:"timing-function"})}),"\n",(0,c.jsx)(e.li,{children:(0,c.jsx)(e.code,{children:"delay"})}),"\n"]}),"\n",(0,c.jsxs)(e.p,{children:["\u800c ",(0,c.jsx)(e.code,{children:"animation"})," \u5247\u53ef\u4ee5\u591a\u63a7\u5236\uff1a"]}),"\n",(0,c.jsxs)(e.ul,{children:["\n",(0,c.jsx)(e.li,{children:(0,c.jsx)(e.code,{children:"iteration-count"})}),"\n",(0,c.jsx)(e.li,{children:(0,c.jsx)(e.code,{children:"direction"})}),"\n",(0,c.jsx)(e.li,{children:(0,c.jsx)(e.code,{children:"play-state"})}),"\n",(0,c.jsx)(e.li,{children:(0,c.jsx)(e.code,{children:"fill-mode"})}),"\n"]}),"\n",(0,c.jsxs)(e.p,{children:["(\u4e0d\u61c2\u4e0a\u9762\u5c6c\u6027\u5728\u5e79\u561b\u7684\u53ef\u4ee5\u98db\u56de\u53bb\u770b\u770b\u524d\u9762\u7684\u6587\u7ae0)",(0,c.jsx)(e.br,{}),"\n",(0,c.jsx)(e.code,{children:"transition"})," \u8ddf ",(0,c.jsx)(e.code,{children:"animation"})," \u6bd4\u8d77\u4f86\u5c31\u50cf\u500b\u5148\u5929\u4e0d\u8db3\u7684\u5c0f\u5b69\uff0c\u5929\u751f\u5c31\u6bd4\u5b83\u7684\u624b\u8db3 ",(0,c.jsx)(e.code,{children:"animation"})," \u5c11\u4e86\u4e00\u4e9b\u529f\u80fd\u3002",(0,c.jsx)(e.br,{}
1),"\n","\u6240\u4ee5\u8aaa\u65e2\u751f\u745c\u4f55\u751f\u4eae\u5462\uff1f",(0,c.jsx)(e.br,{}),"\n","\u7136\u800c\u5be6\u969b\u60c5\u6cc1\u662f\uff0c\u4ed6\u5011\u6839\u672c\u5c31\u4e0d\u662f\u5728\u540c\u4e00\u500b\u8cfd\u5834\u4e0a\u3002"]}),"\n",(0,c.jsxs)(e.p,{children:["\u5148\u8aaa\u7d50\u8ad6\uff1a",(0,c.jsx)(e.br,{}),"\n",(0,c.jsxs)(e.strong,{children:[(0,c.jsx)(e.code,{children:"transition"})," \u9069\u5408\u4f5c\u70ba\u4f7f\u7528\u8005\u8207\u5143\u7d20\u4e92\u52d5\u7684\u904e\u5ea6\u6548\u679c\uff0c\u800c ",(0,c.jsx)(e.code,{children:"animation"})," \u5247\u9069\u5408\u505a\u7db2\u9801\u4e2d\u5e38\u99d0\u7684\u52d5\u756b\u3002"]})]}),"\n",(0,c.jsx)(e.p,{children:"\u6211\u5011\u62c6\u6210\u5e7e\u500b\u9805\u76ee\u4f86\u770b\u9020\u6210\u4ed6\u5011\u5f7c\u6b64\u4e4b\u9593\u5dee\u7570\u7684\u539f\u56e0\u3002"}),"\n",(0,c.jsx)(e.h3,{id:"\u8907\u96dc\u5ea6\u8207\u53ef\u63a7\u6027",children:"\u8907\u96dc\u5ea6\u8207\u53ef\u63a7\u6027"}),"\n",(0,c.jsxs)(e.p,{children:["\u57fa\u65bc\u4e0a\u9762\u63d0\u5230 ",(0,c.jsx)(e.code,{children:"transition"})," \u5929\u751f\u6bd4 ",(0,c.jsx)(e.code,{children:"animation"})," \u5c11\u4e86\u4e00\u4e9b\u5c6c\u6027\uff0c\u9019\u4e5f\u5c31\u610f\u5473\u8457 ",(0,c.jsx)(e.code,{children:"transition"})," \u7684\u53ef\u63a7\u6027\u6bd4 ",(0,c.jsx)(e.code,{children:"animation"})," \u4f4e\u3002",(0,c.jsx)(e.br,{}),"\n","\u5b83\u4e0d\u80fd\u63a7\u5236\u52d5\u756b\u7684\u64ad\u653e\u6b21\u6578\u3001\u65b9\u5411\u3001\u64ad\u653e\u72c0\u614b\uff0c\u4e5f\u7121\u6cd5\u5982 ",(0,c.jsx)(e.code,{children:"animation"})," \u4e00\u6a23\u900f\u904e ",(0,c.jsx)(e.code,{children:"@keyframes"})," \u4f86\u7d30\u5316\u63a7\u5236\u52d5\u756b\u7684\u9032\u5ea6\u3002"]}),"\n",(0,c.jsx)(e.h3,{id:"\u89f8\u767c\u65b9\u5f0f",children:"\u89f8\u767c\u65b9\u5f0f"}),"\n",(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:"transition"})," \u662f\u88ab\u52d5\u7684\uff0c\u9019\u610f\u5473\u8457\u5b83\u53ea\u6709\u5728\u67d0\u4e9b\u4e8b\u4ef6\u89f8\u767c\u6642\u624d\u6703\u57f7\u884c\u3002",(0,c.jsx)(e.br,{}),"\n","\u6bd4\u5982\u8aaa ",(0,c.jsx)(e.code,{children:":hover"}),"\u3001",(0,c.jsx)(e.code,{children:"focus"}),"\u3001",(0,c.jsx)(e.code,{children:"active"})," \u7b49\u7b49\u3002"]}),"\n",(0,c.jsxs)(e.p,{children:["\u800c ",(0,c.jsx)(e.code,{children:"animation"})," \u7684\u89f8\u767c\u5247\u4e0d\u9700\u8981\u7279\u5b9a\u7684\u89f8\u767c\u4e8b\u4ef6\u3002\u5b83\u53ef\u4ee5\u81ea\u52d5\u6216\u6839\u64da\u689d\u4ef6\u958b\u59cb\uff0c\u4e26\u901a\u904e ",(0,c.jsx)(e.code,{children:"@keyframes"})," \u4f86\u5b9a\u7fa9\u52d5\u756b\u7684\u591a\u500b\u968e\u6bb5\u3002"]}),"\n",(0,c.jsx)(e.h3,{id:"\u91cd\u8907\u6027",children:"\u91cd\u8907\u6027"}),"\n",(0,c.jsxs)(e.p,{children:["\u56e0\u70ba\u89f8\u767c\u65b9\u5f0f\u7684\u4e0d\u540c\uff0c",(0,c.jsx)(e.code,{children:"transition"})," \u901a\u5e38\u53ea\u6703\u57f7\u884c\u4e00\u6b21\uff0c\u800c ",(0,c.jsx)(e.code,{children:"animation"})," \u5247\u53ef\u4ee5\u901a\u904e ",(0,c.jsx)(e.code,{children:"iteration-count"})," \u4f86\u63a7\u5236\u91cd\u8907\u6b21\u6578\u3002"]}),"\n",(0,c.jsx)(e.h2,{id:"\u7d50\u8a9e",children:"\u7d50\u8a9e"}),"\n",(0,c.jsxs)(e.p,{children:["\u6c92\u60f3\u5230\u5427\uff0c\u4eca\u5929\u6709\u7d50\u8a9e ~",(0,c.jsx)(e.br,{}),"\n","\u8a92\u597d\u4eca\u5929\u6c92\u6709 code \u7bc4\u4f8b\uff0c\u60f3\u770b ",(0,c.jsx)(e.code,{children:"animation"})," \u8ddf ",(0,c.jsx)(e.code,{children:"transition"})," \u7684\u7bc4\u4f8b\u53ef\u4ee5\u56de\u53bb\u770b\u770b\u524d\u9762\u7684\u6587\u7ae0\u3002",(0,c.jsx)(e.br,{}),"\n","\u4f46\u7e3d\u4e4b\uff0c\u4eca\u5929\u958b\u9019\u500b\u4e3b\u984c\u662f\u60f3\u63a2\u8a0e ",(0,c.jsx)(e.code,{children:"transition"})," \u8ddf ",(0,c.jsx)(e.code,{children:"animation"})," \u9019\u5169\u500b\u9577\u5f97\u6975\u70ba\u76f8\u4f3c\u7684 CSS \u5c6c\u6027\u4ed6\u5011\u4e4b\u9593\u7684\u5dee\u7570\u3002",(0,c.jsx)(e.br,{}),"\n","\u73fe\u5728\u6211\u5011\u81f3\u5c11\u6709\u4e00\u500b\u7d50\u8ad6\uff1a"]}),"\n",(0,c.jsxs)(e.blockquote,{children:["\n",(0,c.jsxs)(e.p,{children:[(0,c.jsx)(e.code,{children:"transition"})," \u9069\u5408\u4f5c\u70ba\u4f7f\u7528\u8005\u8207\u5143\u7d20\u4e92\u52d5\u7684\u904e\u5ea6\u6548\u679c\uff0c",(0,c.jsx)(e.code,{children:"animation"})," \u9069\u5408\u505a\u7db2\u9801\u4e2d\u5e38\u99d0\u7684\u52d5\u756b\u3002"]}),"\n"]})]})}function h(n={}){const{wrapper:e}={...(0,d.R)(),...n.components};return e?(0,c.jsx)(e,{...n,children:(0,c.jsx)(a,{...n})}):a(n)}},28453:(n,e,i)=>{i.d(e,{R:()=>r,x:()=>o});var s=i(96540);const c={},d=s.createContext(c);function r(n){const e=s.useContext(d);return s.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function o(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(c):n.components||c:r(n.components),s.createElement(d.Provider,{value:e},n.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.