E kiʻi i kēia: hui ʻoe i kahi papahana hou, luʻu i loko o ka codebase, a i loko o nā hola mua, ʻike ʻoe i kahi mea maʻamau. Hoʻopuehu ʻia i loko o nā pepa styles, loaʻa iā ʻoe nā wehewehe @keyframes he nui no nā ʻoniʻoni kumu like. ʻEkolu mau hopena fade-in ʻokoʻa, ʻelua a ʻekolu paha hoʻololi slide, kahi lima o nā hāmeʻa zoom, a ma ka liʻiliʻi ʻelua mau ʻano hoʻokalakupua ʻokoʻa no ka mea, no ke aha ʻaʻole? @keyframes pulse { mai { unahi: 1; } i { pālākiō: 1.1; } }
@keyframes nunui-pulse { 0%, 20%, 100% { unahi: 1; } 10%, 40% { pālākiō: 1.2; } }
Inā ʻike ʻia kēia hiʻohiʻona, ʻaʻole ʻoe wale nō. I koʻu ʻike ma nā papahana like ʻole, ʻo kekahi o nā lanakila wikiwiki loa e hiki iaʻu ke hāʻawi aku ʻo ia ka hoʻohui ʻana a me ka hoʻohālikelike ʻana i nā kī kī. Ua lilo ia i kumu hilinaʻi a ke kakali nei au i kēia hoʻomaʻemaʻe ʻana e like me kekahi o kaʻu mau hana mua ma kekahi codebase hou. Ka Logic Behind The Chaos He kūpono loa kēia redundancy ke noʻonoʻo ʻoe. Hoʻohana mākou a pau i nā hāmeʻa like ʻole i kā mākou hana i kēlā me kēia lā: mae, paheʻe, zooms, spins, a me nā hopena maʻamau. He mea maʻalahi kēia mau animation, a he mea maʻalahi ka hoʻopaʻa ʻana i kahi wehewehe @keyframes wikiwiki e hoʻokō i ka hana. Me ka ʻole o ka ʻōnaehana hoʻonaʻauao kikowaena, kākau maoli nā mea hoʻomohala i kēia mau keyframes mai ka wā ʻōpala, me ka ʻike ʻole aia nā animation like ma nā wahi ʻē aʻe o ka codebase. He mea maʻamau kēia i ka wā e hana ai i nā ʻano hoʻolālā e pili ana i nā ʻāpana (e hana ka hapa nui o mākou i kēia mau lā), no ka mea e hana pinepine nā hui ma nā ʻāpana like ʻole o ka noi. Ka hopena? Hūhū hoʻāla. Ka Pilikia Li'ili'i ʻO nā pilikia i ʻike ʻia me ka hoʻopiʻi ʻana i nā keyframes he mau manawa hoʻomohala a me ka bloat code pono ʻole. ʻO ka wehewehe ʻana i nā kīʻaha kī he nui i nā wahi he nui e hoʻonui i ka wā e loli ai nā koi. Pono e hoʻololi i ka manawa o kāu animation fade? Pono ʻoe e ʻimi i kēlā me kēia manawa ma kāu codebase. Makemake ʻoe e hoʻohālikelike i nā hana easing? Pōmaikaʻi ka loaʻa ʻana o nā ʻano like ʻole. ʻO kēia hoʻonui ʻana i nā helu mālama e hana i nā hoʻopou maʻalahi o ka animation i kahi hana hoʻopau manawa. Ka Pilikia Nui Hoʻokumu ʻia kēia hana kope kīʻaha i kahi pilikia ʻoi aku ka hoʻopunipuni e hūnā ana ma lalo o ka ʻili: ka pahele ākea honua. ʻOiai i ka hana ʻana me nā ʻenehana hoʻokumu ʻia, ua wehewehe mau ʻia nā keyframes CSS i ka pae honua. 'O ia ho'i, pili nā kī kī a pau i nā mea a pau. mau. ʻAe, ʻaʻole hoʻohana pono kāu animation i nā kīʻaha kī āu i wehewehe ai i kāu ʻāpana. Hoʻohana ia i nā kī kī hope e pili ana i kēlā inoa like i hoʻoili ʻia i loko o ka pae honua. ʻOiai ua like kāu mau kī kī a pau, me he mea lā he pilikia liʻiliʻi kēia. Akā ʻo ka manawa āu e makemake ai e hoʻonohonoho i kahi animation no kahi hihia hoʻohana kikoʻī, pilikia ʻoe, a i ʻole ʻoi aku ka maikaʻi, ʻo ʻoe ka mea e hana ai. A i ʻole e holo ana kāu hāmeʻa no ka mea ua hoʻouka ʻia kekahi mea ma hope o kāu, e kākau ana i kāu mau kī kī, a i ʻole ka hoʻouka ʻana o kāu ʻāpana i hope a hoʻololi i ke ʻano o ka animation no kēlā me kēia ʻāpana e hoʻohana ana i ka inoa o kēlā keyframe, a ʻaʻole paha ʻoe e ʻike. Eia kahi laʻana maʻalahi e hōʻike ana i ka pilikia: .component-one { /* nā ʻano ʻāpana */ animation: pulse 1s ea-in-out infinite 'ē aʻe; }
/* ʻaʻole e holo kēia wehewehe @keyframes */ @keyframes pulse { mai { unahi: 1; } i { pālākiō: 1.1; } }
/* ma hope o ke code... */
.component-ʻelua { /* nā ʻano ʻāpana */ animation: pulse 1s oluolu-i-waho pau ole; }
/* e pili ana kēia mau kī kī i nā ʻāpana ʻelua */ @keyframes pulse { 0%, 20%, 100% { unahi: 1; } 10%, 40% { pālākiō: 1.2; } }
Hoʻohana nā ʻāpana ʻelua i ka inoa animation like, akā ʻo ka wehewehe ʻelua @keyframes e hoʻopau i ka mea mua. I kēia manawa, e hoʻohana ka ʻāpana-hoʻokahi a me ka ʻāpana-ʻelua i nā kīʻaha kī lua, me ka nānā ʻole i ka ʻāpana i wehewehe ʻia i nā keyframes. E ʻike i ka Pen Keyframes Tokens - Demo 1 [forked] e Amit Sheen. ʻO ka hapa ʻino loa? Hoʻohana maikaʻi kēia i ka hoʻomohala kūloko akā nahā pohihihi i ka hana ʻana i ka wā e hoʻololi ai nā kaʻina hana i ka hoʻouka ʻana o kāu stylesheet. Hoʻopau ʻoe i nā animation e ʻokoʻa ke ʻano ma muli o nā ʻāpana i hoʻouka ʻia a ma ke ʻano he aha. ʻO ka hopena: Unified Keyframes He mea maʻalahi ka pane i kēia haunaele: mālama ʻia nā kiʻi kiʻi ikaika i hoʻopaʻa ʻia i loko o kahi pepa kāʻei like. Ma kahi o ka ʻae ʻana i kēlā me kēia ʻāpana e wehewehe i kāna mau animation ponoʻī, hana mākou i nā keyframes kikowaena i hoʻopaʻa pono ʻia, maʻalahi ehoʻohana, mālama ʻia, a kūpono i nā pono kikoʻī o kāu papahana. E noʻonoʻo e like me nā hōʻailona keyframes. E like me kā mākou hoʻohana ʻana i nā hōʻailona no ka waihoʻoluʻu a me ka spacing, a ua hoʻohana ka nui o mākou i nā hōʻailona no nā waiwai animation, e like me ka lōʻihi a me nā hana easing, no ke aha e hoʻohana ʻole ai i nā hōʻailona no nā keyframes pū kekahi? Hiki i kēia ala ke hoʻohui maoli me nā kaila hana hōʻailona hoʻolālā o kēia manawa āu e hoʻohana nei, ʻoiai e hoʻoponopono ana i ka pilikia liʻiliʻi (hoʻopiʻi code) a me ka pilikia nui (nā hakakā ākea honua) i ka hele hoʻokahi. He maʻalahi ka manaʻo: hana i kahi kumu hoʻokahi o ka ʻoiaʻiʻo no kā mākou mau animation maʻamau. Aia i loko o kēia pepa kaila kaʻana like nā kī kī i hana maikaʻi ʻia e uhi ana i nā hiʻohiʻona animation a kā mākou papahana e hoʻohana maoli nei. ʻAʻohe manaʻo hou inā aia kahi animation fade ma kahi o kā mākou codebase. ʻAʻohe hoʻololi hou i nā animation mai nā ʻāpana ʻē aʻe. Akā, eia ke kī: ʻaʻole kēia he mau mea hoʻonaninani kope-paste wale nō. Hoʻolālā ʻia lākou e hoʻoikaika a maʻalahi ma o nā waiwai maʻamau CSS, e ʻae iā mākou e mālama i ke kūpaʻa ʻoiai e loaʻa ana ka maʻalahi e hoʻololi i nā animations i nā hihia hoʻohana kikoʻī, e like me ka makemake ʻana i kahi animation "pulse" nui aʻe ma kahi hoʻokahi. Ke kūkulu ʻana i ka Token Keyframes Mua ʻO kekahi o nā hua haʻahaʻa haʻahaʻa mua a mākou e hoʻopili ai ʻo ka "fade-in" animation. Ma kekahi o kaʻu mau papahana i hala iho nei, ua loaʻa iaʻu he ʻumikūmālua mau wehewehe fade-in kaʻawale, a ʻae, ua hoʻāla wale lākou i ka opacity mai 0 a 1. No laila, e hana kāua i ka pepa style hou, e kapa iā ia kf-tokens.css, e hoʻokomo i loko o kā mākou papahana, a kau i kā mākou mau kī kī me nā manaʻo kūpono i loko. /* keyframes-tokens.css */
/* * Fade In - fade entrance animation * Hoʻohana: animation: kf-fade-in 0.3s maʻalahi-waho; */ @keyframes kf-fade-in { mai { opacity: 0; } i { opacity: 1; } }
Hoʻololi kēia ʻōlelo @keyframes hoʻokahi i kēlā mau mea hoʻoheheʻe i hoʻopuehu ʻia ma kā mākou codebase. Maʻemaʻe, maʻalahi, a pili honua. A i kēia manawa ua wehewehe mākou i kēia hōʻailona, hiki iā mākou ke hoʻohana iā ia mai kekahi ʻāpana o kā mākou papahana: .modal { animation: kf-fade-in 0.3s maʻalahi-waho; }
.mea hana { animation: kf-fade-in 0.2s oluolu-i-waho; }
.hoʻolaha { animation: kf-fade-i loko o 0.5s oluolu-waho; }
E ʻike i ka Pen Keyframes Tokens - Demo 2 [forked] e Amit Sheen. Nānā: Ke hoʻohana nei mākou i kf- prefix ma ko mākou mau inoa @keyframes. Hoʻohana ʻia kēia prefix ma ke ʻano he inoa inoa e pale ai i ka hoʻopaʻa inoa ʻana me nā animation i loaʻa i loko o ka papahana a hoʻomaopopo koke i ka loaʻa ʻana o kēia mau keyframes mai kā mākou keyframes token file. Hana ʻana i kahi paheʻe hoʻoikaika kino Hana maikaʻi nā kf-fade-in keyframes no ka mea he maʻalahi a ʻaʻohe wahi liʻiliʻi e hoʻopau i nā mea. I nā animation ʻē aʻe, akā, pono mākou e ʻoi aku ka ikaika, a ma ʻaneʻi hiki iā mākou ke hoʻohana i ka mana nui o nā waiwai maʻamau CSS. ʻO kēia kahi i ʻālohilohi maoli ai nā hōʻailona keyframes i hoʻohālikelike ʻia i nā animation static scattered. E lawe i kahi ʻano maʻamau: "slide-in" animations. Akā, paheʻe mai kahi mai? 100px mai ka ʻākau? 50% mai ka hema? Pono e komo mai ka piko o ka pale? A i ʻole e lana paha mai lalo? Nui nā mea hiki, akā ma kahi o ka hana ʻana i nā kīʻaha kī kaʻawale no kēlā me kēia ʻaoʻao a me kēlā me kēia ʻano hoʻololi, hiki iā mākou ke kūkulu i hoʻokahi hōʻailona maʻalahi e kūpono i nā hiʻohiʻona āpau: /* * Paheʻe i loko - hoʻoheheʻe kuhikuhi kuhikuhi * E hoʻohana i ka --kf-slide-mai e hoʻomalu i ke kuhikuhi * Paʻamau: paheʻe mai ka hema (-100%) * Hoʻohana: * animation: kf-slide-in 0.3s maʻalahi-waho; * --kf-slide-mai: -100px 0; // paheʻe mai ka hema * --kf-slide-mai: 100px 0; // paheʻe mai ka ʻākau * --kf-slide-mai: 0 -50px; // paheʻe mai luna mai */
@keyframes kf-paʻi-i { mai { unuhi: var(--kf-slide-mai, -100% 0); } i { unuhi: 0 0; } }
I kēia manawa hiki iā mākou ke hoʻohana i kēia hōʻailona @keyframes no kēlā me kēia kuhikuhi slide ma ka hoʻololi wale ʻana i ka --kf-slide-mai ka waiwai maʻamau: .sidebar { animation: kf-paheʻe-i 0.3s oluolu-waho; /* Hoʻohana i ka waiwai paʻa: nā paheʻe mai ka hema */ }
.hoʻolaha { animation: kf-paheʻe-i 0.4s oluolu-waho; --kf-slide-mai: 0 -50px; /* paheʻe mai luna mai */ }
.modal { animation: kf-fade-i 0.5s, kf-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-mai: 50px 50px; /* paheʻe mai lalo-akau */ }
Hāʻawi kēia ala iā mākou i ka maʻalahi me ka mālama mau ʻana. Hoʻokahi ʻōlelo hoʻolaha keyframe, hiki ʻole ke hiki. E ʻike i ka Pen Keyframes Tokens - Demo 3 [forked] na Amit Sheen. A inā makemake mākou e hoʻololi i kā mākou animation i ʻoi aku ka maʻalahi, e ʻae i nā hopena "slide-out" pū kekahi, hiki iā mākou kehoʻohui wale i kahi --kf-slide-i ka waiwai maʻamau, e like me ka mea a mākou e ʻike ai ma ka ʻāpana aʻe. ʻO nā kiʻi kiʻi hoʻonui ʻelua ʻO kekahi animation maʻamau i hoʻopaʻa ʻia ma nā papahana he "zoom" hopena. Inā he mea hoʻonui maʻalahi no nā memo toast, kahi hoʻonui nui no nā modals, a i ʻole ka hopena haʻahaʻa haʻahaʻa no nā poʻomanaʻo, aia nā hāmeʻa zoom ma nā wahi āpau. Ma kahi o ka hana ʻana i nā kīʻaha kī kaʻawale no kēlā me kēia kumukūʻai unahi, e kūkulu kākou i hoʻokahi pūʻulu maʻalahi o kf-zoom keyframes:
/* * Hoʻonui - hoʻonui i ka animation * E hoʻohana i ka --kf-zoom-mai a me --kf-zoom-to no ka hoʻomalu ʻana i nā waiwai unahi * Paʻamau: hoʻonui mai 80% a 100% (0.8 a 1) * Hoʻohana: * hoʻouluulu: kf-zoom 0.2s maʻalahi i waho; * --kf-zoom-mai: 0.5; --kf-zoom-i: 1; // zoom mai 50% a i 100% * --kf-zoom-mai: 1; --kf-zoom-i: 0; // zoom mai 100% a i 0% * --kf-zoom-mai: 1; --kf-zoom-i: 1.1; // zoom mai 100% a i 110% */
@keyframes kf-zoom { mai { unahi: var(--kf-zoom-mai, 0.8); } i { pālākiō: var(--kf-zoom-to, 1); } }
Me ka wehewehe hoʻokahi, hiki iā mākou ke hoʻokō i kekahi ʻano zoom e pono ai mākou: .toast { animation: kf-slide-i 0.2s, kf-zoom 0.4s maʻalahi; --kf-paheʻe-mai: 0 100%; /* paheʻe mai luna mai */ /* Hoʻohana i ka zoom paʻamau: nā unahi mai 80% a i 100% */ }
.modal { animation: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-mai: 0; /* hoʻonui nui mai 0% a 100% */ }
.heading { animation: kf-fade-in 2s, kf-zoom 2s oluolu-i; --kf-zoom-mai: 1.2; --kf-zoom-i: 0.8; /* haʻahaʻa haʻahaʻa */ }
ʻO ka paʻamau o 0.8 (80%) hana maikaʻi loa no ka hapa nui o nā mea UI, e like me nā memo toast a me nā kāleka, ʻoiai e maʻalahi ka hana ʻana no nā hihia kūikawā. E ʻike i ka Pen Keyframes Tokens - Demo 4 [forked] e Amit Sheen. Ua ʻike paha ʻoe i kekahi mea hoihoi i nā laʻana hou: ua hoʻohui mākou i nā animations. ʻO kekahi o nā pōmaikaʻi koʻikoʻi o ka hana ʻana me @keyframes tokens ʻo ia ka mea i hoʻolālā ʻia e hoʻohui pono me kekahi i kekahi. ʻO kēia haku mele ma ka manaʻo, ʻaʻole i pōʻino. E kūkākūkā mākou i ka haku mele ʻana i nā kikoʻī hou aku ma hope, me kahi e hiki ai ke lilo i pilikia, akā ʻo ka hapa nui o nā hui ʻana he pololei a maʻalahi hoʻi e hoʻokō. Nānā: ʻOiai e kākau ana i kēia ʻatikala, a ma muli paha o ke kākau ʻana, ʻike wau iaʻu iho e noʻonoʻo hou i ka manaʻo holoʻokoʻa o nā animations komo. Me nā holomua hou i CSS, pono anei mākou iā lākou? ʻO ka mea pōmaikaʻi, ua ʻimi ʻo Adam Argyle i nā nīnau like a hōʻike maikaʻi iā lākou i kāna blog. ʻAʻole kūʻē kēia i ka mea i kākau ʻia ma aneʻi, akā hāʻawi ia i kahi ala kūpono e noʻonoʻo ai, ʻoiai inā hilinaʻi nui kāu mau papahana i nā animation komo. Nā Animation mau ʻOiai e hana ʻia nā animation komo, e like me "fade", "slide", a me ka "zoom" i hoʻokahi manawa a pau, e hoʻomau mau ʻia nā animation no ka huki ʻana i ka manaʻo a i ʻole ke kuhikuhi ʻana i ka hana mau. ʻO nā hāmeʻa hoʻomau maʻamau ʻelua aʻu e hālāwai ai ʻo "spin" (no ka hoʻouka ʻana i nā hōʻailona) a me "pulse" (no ka hōʻike ʻana i nā mea koʻikoʻi). Hāʻawi kēia mau animation i nā luʻi kūʻokoʻa i ka wā e hana ai i nā hōʻailona keyframes. ʻAʻole like me nā animation komo e hele maʻamau mai kekahi mokuʻāina a i kekahi, pono e hoʻonohonoho pono ʻia nā animation mau i kā lākou ʻano hana. Ke Kauka Milo Hoʻohana ʻia kēlā me kēia papahana i nā animation spin he nui. ʻO kekahi poʻe ma ka ʻaoʻao o ka uaki, ʻo kekahi ma ka ʻaoʻao o ka uaki. Hana kekahi i ka hoʻololi 360-degere hoʻokahi, hana kekahi i nā huli he nui no ka hopena wikiwiki. Ma kahi o ka hana ʻana i nā kīʻaha kī ʻokoʻa no kēlā me kēia hoʻololi, e kūkulu kākou i hoʻokahi wili maʻalahi e mālama i nā hiʻohiʻona āpau:
/* * Spin - hoʻololi hoʻololi * E hoʻohana i --kf-spin-mai a me --kf-spin-to no ka hoʻomalu ʻana i ka pae hoʻololi * E hoʻohana i --kf-spin-turns e hoʻomalu i ka nui o ka hoʻololi ʻana * Paʻamau: huli mai ka 0deg a 360deg (1 hoʻololi piha) * Hoʻohana: * animation: kf-spin 1s laina laina pau ʻole; * --kf-wili-wili: 2; // 2 kawili piha * --kf-wili-mai: 0deg; --kf-wili-i: 180deg; // hoʻololi hapalua * --kf-wili-mai: 0deg; --kf-wili-i: -360deg; // kūʻē */
@keyframes kf-wili { mai { kahuli: var(--kf-spin-mai, 0deg); } i { kahuli: calc(var(--kf-spin-mai, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
I kēia manawa hiki iā mākou ke hana i nā ʻano ʻano spin a mākou e makemake ai:
.hoʻouka-wili { animation: kf-spin 1s laina laina pau ole; /* Hoʻohana paʻamau: huli mai 0deg a 360deg */ }
.hoʻouka wikiwiki { animation: kf-spin 1.2s maʻalahi-i-waho ʻē aʻe; --kf-wili-wili: 3; /* 3 hoʻololi piha no kēlā me kēia kuhikuhi i kēlā me kēia pōʻai*/ }
.pae-hoihoi { animation: kf-spin 1.5s ʻanuʻu (8) pau ʻole; --kf-wili-i: -360deg; /* kūʻē i ka hola */ }
.wiggle-wiggle { animation: kf-spin 2s maʻalahi-i-waho ʻokoʻa ʻole; --kf-wili-mai: -16deg; --kf-wili-i: 32deg; /* wiliwili 36 deg: ma waena o -18 deg a me + 18 deg */ }
E ʻike i ka Pen Keyframes Tokens - Demo 5 [forked] e Amit Sheen. ʻO ka nani o kēia ala ʻo ia ka hana ʻana o nā kīʻaha kī like no ka hoʻouka ʻana i nā spinners, nā kiʻi ʻoniʻoni, nā hopena wiggle, a me nā hāmeʻa multi-turn paʻakikī. Ka Pulse Paradox ʻOi aku ka maʻalahi o nā animation Pulse no ka mea hiki iā lākou ke "pulse" i nā waiwai like ʻole. Puhi kekahi i ka unahi, pulu kekahi i ka opacity, a me kekahi mau waiwai kala pulse e like me ka olinolino a me ka saturation. Ma mua o ka hana ʻana i nā kīʻaha kī ʻokoʻa no kēlā me kēia waiwai, hiki iā mākou ke hana i nā keyframes e hana pū me kekahi waiwai CSS. Eia kekahi laʻana o ka pulse keyframe me ka unahi a me nā koho opacity:
/* * Pulse - pulsing animation * E hoʻohana i --kf-pulse-scale-mai a me --kf-pulse-scale-i e hoʻomalu i ka laulā * E hoʻohana i --kf-pulse-opacity-mai a me --kf-pulse-opacity-i e hoʻomalu i ka laulā opacity * Default: ʻaʻohe pulse (nā waiwai āpau 1) * Hoʻohana: * animation: kf-pulse 2s maʻalahi-i-waho ʻokoʻa ʻole; * --kf-puʻi-kaumaha-mai: 0.95; --kf-pulse-scale-i: 1.05; // puʻupuʻu unahi * --kf-pulse-opacity-mai: 0.7; --kf-pulse-opacity-to: 1; // puʻupuʻu opacity */
@keyframes kf-pulse { mai { pālākiō: var(--kf-pulse-scale-mai, 1); opacity: var(--kf-pulse-opacity-mai, 1); } i { pālākiō: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
Hoʻokumu kēia i kahi pulse maʻalahi e hiki ke hoʻoulu i nā waiwai he nui: .kahea-i-hana { animation: kf-pulse 0.6s pau ole; --kf-pulse-opacity-mai: 0.5; /* pulu opacity */ }
.puka hoʻolaha { animation: kf-pulse 0.6s maʻalahi-i-waho ʻokoʻa ʻole; --kf-pulse-scale-mai: 0.9; --kf-pulse-scale-i: 1.1; /* puki puiki */ }
.kikokikona { animation: kf-pulse 1.5s hoʻomāmā i ka palena ʻole; --kf-pulse-scale-mai: 0.8; --kf-pulse-opacity-mai: 0.2; /* pālākiō a me ka pulse opacity */ }
E ʻike i ka Pen Keyframes Tokens - Demo 6 [forked] e Amit Sheen. Hiki i kēia kī kī kf-pulse hoʻokahi ke mālama i nā mea a pau mai ka hopu ʻana i ka nānā maʻalahi a hiki i nā hiʻohiʻona koʻikoʻi, ʻoiai he mea maʻalahi ke hoʻopilikino. Hoʻomaʻamaʻa kiʻekiʻe ʻO kekahi o nā mea nui e pili ana i ka hoʻohana ʻana i nā hōʻailona keyframes ʻo ia ka maʻalahi o ka hoʻonui ʻana i kā mākou waihona animation a hāʻawi i nā hopena i hiki ʻole i ka hapa nui o nā mea hoʻomohala ke kākau mai ka wā ʻōpala, e like me ka elastic a i ʻole bounce. Eia kekahi laʻana o kahi hōʻailona kīʻaha "bounce" maʻalahi e hoʻohana ana i kahi --kf-bounce-mai ka waiwai maʻamau e kāohi i ke kiʻekiʻe lele. /* * Bounce - hoʻoulu ʻana i ka puka komo * E hoʻohana i --kf-bounce-from e hoʻomalu i ke kiʻekiʻe lele * Default: lele mai 100vh (ma waho o ka pale) * Hoʻohana: * animation: kf-bounce 3s oluolu-i; * --kf-bounce-mai: 200px; // lele mai 200px kiʻekiʻe */
@keyframes kf-bounce { 0% { unuhi: 0 calc(var(--kf-bounce-mai, 100vh) * -1); }
34% { unuhi: 0 calc(var(--kf-bounce-mai, 100vh) * -0.4); }
55% { unuhi: 0 calc(var(--kf-bounce-mai, 100vh) * -0.2); }
72% { unuhi: 0 calc(var(--kf-bounce-mai, 100vh) * -0.1); }
85% { unuhi: 0 calc(var(--kf-bounce-mai, 100vh) * -0.05); }
94% { unuhi: 0 calc(var(--kf-bounce-mai, 100vh) * -0.025); }
99% { unuhi: 0 calc(var(--kf-bounce-mai, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { unuhi: 0 0; animation-manawa-hana: ease-out; } }
ʻOi aku ka maʻalahi o nā hana e like me "elastic" ma muli o ka helu ʻana i loko o nā pahu kī. Pono mākou e wehewehe --kf-elastic-from-X a me --kf-elastic-from-Y ma kahi kaʻawale (ua koho ʻia nā mea ʻelua), a hui pū lākou iā mākou e hana i kahi puka elastic mai kēlā me kēia wahi ma ka pale.
/* * Elastic In - elastic enter animation * E hoʻohana i --kf-elastic-mai-X a me --kf-elastic-mai-Y e hoʻomalu i ke kūlana hoʻomaka * Default: komo mai ke kikowaena luna (0, -100vh) * Hoʻohana: * hoʻouluulu: kf-elastic-in 2s maʻalahi-i-waho ʻelua; * --kf-elastic-mai-X: -50px; * --kf-elastic-mai-Y: -200px; // komo mai (-50px, -200px) */
@keyframes kf-elastic-in { 0% { unuhi: calc(var(--kf-elastic-mai-X, -50vw) * 1) calc(var(--kf-elastic-mai-Y, 0px) * 1); }
16% { unuhi: calc(var(--kf-elastic-mai-X, -50vw) * -0.3227) calc(var(--kf-elastic-mai-Y, 0px) * -0.3227); }
28% { unuhi: calc(var(--kf-elastic-mai-X, -50vw) * 0.1312)calc(var(--kf-elastic-mai-Y, 0px) * 0.1312); }
44% { unuhi: calc(var(--kf-elastic-mai-X, -50vw) * -0.0463) calc(var(--kf-elastic-mai-Y, 0px) * -0.0463); }
59% { unuhi: calc(var(--kf-elastic-mai-X, -50vw) * 0.0164) calc(var(--kf-elastic-mai-Y, 0px) * 0.0164); }
73% { unuhi: calc(var(--kf-elastic-mai-X, -50vw) * -0.0058) calc(var(--kf-elastic-mai-Y, 0px) * -0.0058); }
88% { unuhi: calc(var(--kf-elastic-mai-X, -50vw) * 0.0020) calc(var(--kf-elastic-mai-Y, 0px) * 0.0020); }
100% { unuhi: 0 0; } }
ʻO kēia ala e maʻalahi ai ka hoʻohana hou ʻana a me ka hoʻopilikino ʻana i nā kī kī kiʻekiʻe ma waena o kā mākou papahana, ma ka hoʻololi ʻana i kahi waiwai maʻamau.
.bounce-and-zoom { animation: kf-bounce 3s oluolu-i, kf-zoom 3s laina laina; --kf-zoom-mai: 0; }
.bounce-and-slide { animation-composition: hoʻohui; /* Hoʻohana nā hāmeʻa ʻelua i ka unuhi */ animation: kf-bounce 3s oluolu-i, kf-pahee-i 3s oluolu-waho; --kf-paheʻe-mai: -200px; }
.elastic-in { animation: kf-elastic-in 2s oluolu-i-waho; }
E ʻike i ka Pen Keyframes Tokens - Demo 7 [forked] e Amit Sheen. A hiki i kēia manawa, ua ʻike mākou pehea e hiki ai iā mākou ke hoʻohui i nā keyframes ma ke ʻano akamai a maikaʻi. ʻOiaʻiʻo, makemake paha ʻoe e hoʻololi i nā mea i kūpono i nā pono o kāu papahana, akā ua uhi mākou i nā hiʻohiʻona o kekahi mau animation maʻamau a me nā hihia hoʻohana i kēlā me kēia lā. A me kēia mau hōʻailona keyframes i hoʻopaʻa ʻia, ua loaʻa iā mākou i kēia manawa nā poloka kūkulu ikaika no ka hana ʻana i nā hāmeʻa paʻa, mālama ʻia ma ka papahana holoʻokoʻa. ʻAʻole i hoʻololi hou ʻia nā kīʻaha kī, ʻaʻohe paio hoʻopaʻa honua. He ala maʻemaʻe a maʻalahi hoʻi e mālama i kā mākou pono animation āpau. Akā ʻo ka nīnau maoli: Pehea mākou e haku ai i kēia mau poloka kūkulu? Hoʻohui i nā mea a pau Ua ʻike mākou he maʻalahi ka hoʻohui ʻana i nā hōʻailona keyframes. ʻAʻole pono mākou i kahi mea kūikawā akā e wehewehe i ka animation mua, e wehewehe i ka lua, e hoʻonohonoho i nā mea hoʻololi e like me ka mea e pono ai, a ʻo ia nō. /* Fade in + slide in */ .toast { animation: kf-fade-i 0.4s, kf-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-slide-mai: 0 40px; }
/* Hoʻonui + fade in */ .modal { animation: kf-fade-i 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-mai: 0.7; --kf-zoom-i: 1; }
/* Holo i loko + pulse */ .hoʻolaha { animation: kf-slide-i 0.5s, kf-pulse 1.2s ea-in-out infinite mea hou; --kf-slide-mai: -100px 0; --kf-pulse-scale-mai: 0.95; --kf-pulse-scale-i: 1.05; }
Hana maikaʻi kēia mau hui ʻana no ka mea ʻo kēlā me kēia animation e kuhikuhi i kahi waiwai ʻokoʻa: opacity, transform (translate/scale), etc. Akā i kekahi manawa aia nā paio, a pono mākou e ʻike i ke kumu a pehea e hana ai iā lākou. Ke ho'āʻo nei ʻelua animation e hoʻoulu i ka waiwai like - no ka laʻana, ʻelua animating scale a i ʻole animating opacity ʻelua - ʻaʻole e like ka hopena i ka mea āu e manaʻo ai. Ma ka maʻamau, hoʻokahi wale nō o nā animation i hoʻopili maoli ʻia i kēlā waiwai, ʻo ia ka mea hope loa i ka papa inoa animation. He palena kēia o ka mālama ʻana o CSS i nā animation he nui ma ka waiwai hoʻokahi. No ka laʻana, ʻaʻole e hana kēia e like me ka mea i manaʻo ʻia no ka mea e hoʻopili wale ʻia ka animation kf-pulse. .ʻino-hui { animation: kf-zoom 0.5s i mua, kf-pulse 1.2s pau ole; --kf-zoom-mai: 0.5; --kf-zoom-i: 1.2; --kf-pulse-scale-mai: 0.8; --kf-pulse-scale-i: 1.1; }
Hoʻohui Animation ʻO ke ala maʻalahi a pololei loa e mālama ai i nā animation he nui e pili ana i ka waiwai hoʻokahi, ʻo ia ka hoʻohana ʻana i ka waiwai animation-composition. Ma ka la'ana hope loa ma luna, ua pani ka kf-pulse animation i ka kf-zoom animation, no laila, 'a'ole mākou e 'ike i ka zoom mua a 'a'ole e loa'a ka paona i mana'o 'ia i ka 1.2. Ma ka hoʻonohonoho ʻana i ka animation-composition e hoʻohui, ʻōlelo mākou i ka polokalamu kele e hoʻohui i nā animation ʻelua. Hāʻawi kēia iā mākou i ka hopena a mākou e makemake ai. .component-ʻelua { animation-composition: hoʻohui; }
E ʻike i ka Pen Keyframes Tokens - Demo 8 [forked] e Amit Sheen. Hana maikaʻi kēia ala no ka hapa nui o nā hihia kahi e makemake ai mākou e hoʻohui i nā hopena ma ka waiwai like. He mea pono nō hoʻi inā pono mākou e hoʻohui i nā animation me nā waiwai waiwai static. No ka laʻana, inā loaʻa iā mākou kahi mea e hoʻohana ana i ka waiwai unuhi e hoʻonohonoho pono i kahi a mākou e makemake ai, a laila makemake mākou e hoʻolalelale iā ia me nā kf-slide-in keyframes, loaʻa iā mākou kahi lele ʻike ʻia me ka ʻole o ka animation-composition. E ʻike i ka Pen Keyframes Tokens - Demo 9 [forked] e Amit Sheen. Me ka animation-composition i hoʻonohonoho ʻia e hoʻohui, ua hui pū ʻia ka animation me ka mea i loaʻahoʻololi, no laila e hoʻomau ka mea i kahi a hoʻōla e like me ka mea i manaʻo ʻia. Animation Stagger ʻO ke ala ʻē aʻe o ka lawelawe ʻana i nā hāmeʻa he nui, ʻo ia ka "hue" iā lākou - ʻo ia hoʻi, e hoʻomaka liʻiliʻi i ka lua ma hope o ka pau ʻana o ka mea mua. ʻAʻole ia he hopena e hana no kēlā me kēia hihia, akā pono ia ke loaʻa iā mākou kahi animation komo a ukali ʻia e kahi animation mau. /* mae i loko + opacity pulse */ .hoʻolaha { animation: kf-fade-in 2s oluolu-waho, kf-pulse 0.5s 2s oluolu-i-waho i hope loa; --kf-pulse-opacity-to: 0.5; }
E ʻike i ka Pen Keyframes Tokens - Demo 10 [forked] e Amit Sheen. Nā mea kauoha ʻO kahi hapa nui o nā animation a mākou e hana nei me ka hoʻohana ʻana i ka waiwai hoʻololi. I ka hapanui o nā hihia, ʻoi aku ka maʻalahi o kēia. Loaʻa iā ia kahi pono hana e like me ka hoʻololi ʻana i nā animation hiki ke hoʻonui ʻia GPU. Akā inā mākou e hoʻohana i nā hoʻololi, pono mākou e ʻae i ke kauoha a mākou e hana ai i kā mākou hoʻololi. He nui. I loko o kā mākou keyframes i kēia manawa, ua hoʻohana mākou i nā hoʻololi pilikino. E like me nā kikoʻī, hoʻohana mau ʻia kēia mau mea ma kahi ʻano paʻa: ʻo ka mua, e unuhi ʻia ka mea, a laila huli, a laila scale. He kūpono kēia a ʻo ia ka mea a ka hapa nui o mākou e manaʻo ai. Eia naʻe, inā mākou e hoʻohana i ka waiwai hoʻololi, ʻo ke kauoha i kākau ʻia ai nā hana ʻo ia ke kauoha i hoʻohana ʻia ai. I kēia hihia, inā mākou e hoʻoneʻe i kahi mea 100 pixels ma ka X-axis a laila hoʻololi iā ia ma 45 degere, ʻaʻole like ia me ka hoʻohuli mua ʻana iā ia ma 45 degere a laila hoʻoneʻe iā ia i 100 pixels. /* Pāhā ʻulaʻula: Unuhi mua, a huli */ .example-one { hoʻololi: translateX(100px) rotate(45deg); }
/* Huina ʻōmaʻomaʻo: E kahuli mua, a laila e unuhi */ .hoʻohālike-ʻelua { hoʻololi: huli(45deg) unuhiX(100px); }
E ʻike i ka Pen Keyframes Tokens - Demo 11 [forked] e Amit Sheen. Akā, e like me ke kauoha hoʻololi, hoʻololi kēlā me kēia kanaka - nā mea āpau a mākou i hoʻohana ai no nā hōʻailona keyframes - hiki ke hana ma mua o ka hana hoʻololi. ʻO ia ke ʻano o nā mea āu i hoʻonoho ai i ka waiwai hoʻololi e hana ʻia ma hope o nā animations. Akā inā hoʻonohonoho ʻoe, no ka laʻana, unuhi pū me nā kī kī kf-spin, e hana ʻia ka unuhi ma mua o ka hoʻoulu ʻana. Huikau nae?! Ke alakaʻi nei kēia i nā kūlana kahi e hiki ai i nā waiwai static ke hoʻoulu i nā hopena like ʻole no ka animation like, e like me kēia hihia:
/* ʻO ka hana maʻamau no nā mea wili ʻelua */ .mea wili { animation: kf-spin 1s laina laina pau ole; }
/* Mea wili ʻulaʻula: unuhi ma mua o ka hoʻololi ʻana (hoʻololi kanaka) */ .spinner-pink { unuhi: 100% 50%; }
/* Mea wili ʻōmaʻomaʻo: hoʻohuli a laila unuhi (ka hoʻonohonoho hana) */ .spinner-green { hoʻololi: unuhi(100%, 50%); }
E ʻike i ka Pen Keyframes Tokens - Demo 12 [forked] e Amit Sheen. Hiki iā ʻoe ke ʻike ua loaʻa i ka mea wili mua (ʻulaʻula) kahi unuhi i hana ʻia ma mua o ka hoʻololi ʻana o kf-spin, no laila neʻe mua ʻo ia i kona wahi a laila wili. Loaʻa i ka mea wili lua ('ōmaʻomaʻo) kahi unuhi () hana ma hope o ka hoʻololi ʻana o kēlā me kēia kanaka, no laila e wili mua ka element, a laila neʻe e pili ana i kona kihi o kēia manawa, a loaʻa iā mākou kēlā hopena orbit ākea. ʻAʻole, ʻaʻole kēia he bug. ʻO ia wale nō kekahi o nā mea e pono ai mākou e ʻike e pili ana i ka CSS a e hoʻomanaʻo i ka wā e hana ai me nā hāmeʻa he nui a i ʻole nā hoʻololi he nui. Inā pono, hiki iā ʻoe ke hana i kahi hoʻonohonoho hou o kf-spin-alt keyframes e hoʻololi i nā mea me ka hoʻohana ʻana i ka hana rotate(). Hoemi Hoemi A ʻoiai mākou e kamaʻilio e pili ana i nā keyframes ʻē aʻe, ʻaʻole hiki iā mākou ke haʻalele i ke koho "no animation". ʻO kekahi o nā pōmaikaʻi nui loa o ka hoʻohana ʻana i nā hōʻailona keyframes ʻo ia ka hiki ke hoʻomoʻa ʻia i loko, a he maʻalahi maoli ke hana. Ma ka hoʻolālā ʻana i kā mākou mau kī kī me ka hiki ke komo i loko o ka noʻonoʻo, hiki iā mākou ke hōʻoia i nā mea hoʻohana i makemake i ka neʻe i hoʻemi ʻia e loaʻa i kahi ʻike maʻalahi, ʻaʻohe mea hoʻohilahila ʻole, me ka ʻole o ka hana hou a i ʻole ke kope kope. Hiki ke hoʻololi iki i ka manaʻo pololei o "Reduced Motion" mai kekahi animation i kekahi, a mai ka papahana a i ka papahana, akā eia kekahi mau mea nui e hoʻomanaʻo: Ke hoʻohenehene nei i nā Keyframes ʻOiai hiki ke hoʻonāwaliwali a hoʻolohi paha kekahi mau animation, aia kekahi mau mea e nalowale loa ke noi ʻia ka neʻe hoʻemi ʻia. He laʻana maikaʻi nā animation Pulse. No ka hōʻoia ʻana ʻaʻole holo kēia mau animation i ke ʻano o ka neʻe liʻiliʻi, hiki iā mākou ke hoʻopili iā lākou i ka nīnau media kūpono.
@media (makemake-hōʻemi-neʻe: ʻaʻohe makemake) { @keyfrmaes kf-pulse { mai { pālākiō: var(--kf-pulse-scale-mai, 1); opacity: var(--kf-pulse-opacity-mai, 1); } i { pālākiō: var(--kf-pulse-scale-to, 1); opacity:var(--kf-pulse-opacity-to, 1); } } }
Mālama kēia i nā mea hoʻohana i hoʻonohonoho i ka makemake-reduced-motion e hōʻemi ʻaʻole e ʻike i ka animation a loaʻa iā lākou kahi ʻike e kūpono i kā lākou makemake. Komo koke Aia kekahi mau kī kī ʻaʻole hiki iā mākou ke wehe wale, e like me nā animation komo. Pono e loli ka waiwai, pono e ho'āla; a i ʻole, ʻaʻole e loaʻa nā waiwai kūpono i ka mea. Akā i ka neʻe ʻana i hoʻemi ʻia, pono koke kēia hoʻololi mai ka waiwai mua. No ka hoʻokō ʻana i kēia, e wehewehe mākou i kahi hoʻonohonoho hou o nā keyframes kahi e lele koke ai ka waiwai i ka mokuʻāina hope. Ua lilo kēia mau mea i kā mākou mau kī paʻamau. A laila, e hoʻohui mākou i nā kī kī maʻamau i loko o kahi nīnau media no ka makemake-hoʻemi ʻia i hoʻonohonoho ʻia i ka makemake ʻole, e like me ka laʻana ma mua. /* pop i loko koke no ka hoʻemi ʻana i ka neʻe */ @keyframes kf-zoom { mai, i { pālākiō: var(--kf-zoom-to, 1); } }
@media (makemake-hōʻemi-neʻe: ʻaʻohe makemake) { // @keyframes kf-zoom { mai { unahi: var(--kf-zoom-mai, 0.8); } i { pālākiō: var(--kf-zoom-to, 1); } } }
Ma kēia ala, ʻike nā mea hoʻohana i makemake i ka neʻe i hoʻemi ʻia e ʻike koke ʻia ka mea i kona kūlana hope, aʻo nā mea ʻē aʻe e loaʻa i ka hoʻololi animated. ʻO ke ala palupalu Aia kekahi mau hihia kahi e makemake ai mākou e hoʻomau i kahi neʻe, akā ʻoi aku ka palupalu a me ka mālie ma mua o ka animation kumu. No ka laʻana, hiki iā mākou ke pani i kahi puka bounce me kahi fade-in mālie.
@keyframes kf-bounce { /* Hoʻomoe ʻoluʻolu no ka neʻe hoʻemi ʻia */ }
@media (makemake-hōʻemi-neʻe: ʻaʻohe makemake) { @keyframes kf-bounce { // } }
I kēia manawa, loaʻa ka manaʻo o nā mea hoʻohana me ka neʻe haʻahaʻa, akā me ka ʻole o ka neʻe ikaika o ka bounce a i ʻole ka elastic animation. Me ka paʻa ʻana o nā poloka kūkulu hale, ʻo ka nīnau aʻe pehea e hoʻolilo ai iā lākou i ʻāpana o ke kaʻina hana maoli. ʻO ke kākau ʻana i nā kī kī maʻalahi he mea hoʻokahi, akā ʻo ka hoʻolilo ʻana iā lākou i hilinaʻi ma waena o kahi papahana nui e pono ai i kekahi mau hoʻolālā i pono iaʻu e aʻo i ke ala paʻakikī. Nā Kūlana hoʻokō a me nā hana maikaʻi loa Ke loaʻa iā mākou kahi waihona paʻa o nā hōʻailona keyframes, ʻo ka paʻakikī maoli ka pehea e lawe ai iā lākou i ka hana o kēlā me kēia lā.
ʻO ka hoʻowalewale e hoʻokuʻu i nā keyframes i ka manawa hoʻokahi a haʻi aku i ka hoʻoponopono ʻana i ka pilikia, akā ma ka hoʻomaʻamaʻa ʻana ua ʻike au i nā hopena maikaʻi loa mai ka lawe ʻana i ka lohi. E hoʻomaka me nā animation maʻamau, e like me fade a slide. He mau lanakila maʻalahi kēia e hōʻike ana i ka waiwai koke me ka ʻole e koi i nā kākau hou nui. ʻO ka hoʻopaʻa inoa ʻana kekahi mea e pono ai ka nānā ʻana. ʻO ka prefix a i ʻole ka inoa inoa e maopopo ai he mau hōʻailona nā animations a ʻo ia nā mea hoʻokahi. Hoʻopaʻa ʻia hoʻi ia i nā hui ʻana a kōkua i nā lālā hui hou e ʻike i ka ʻōnaehana kaʻana like i ka manawa. He mea nui ka palapala e like me ke code pono'ī. ʻO kahi ʻōlelo pōkole ma luna o kēlā me kēia keyframes token hiki ke mālama i nā hola o ka wānana ma hope. Hiki i ka mea hoʻomohala ke wehe i ka faila hōʻailona, ʻimi no ka hopena e pono ai lākou, a kope pololei i ke ʻano hoʻohana i kā lākou ʻāpana. ʻO ka maʻalahi ka mea e pono ai kēia ala i ka hoʻoikaika. Ma ka hōʻike ʻana i nā waiwai maʻamau kūpono, hāʻawi mākou i nā lumi hui e hoʻololi i ka animation me ka ʻole o ka haki ʻana i ka ʻōnaehana. I ka manawa like, e ho'āʻo e ʻole e hoʻopiʻi nui. E hāʻawi i nā kī i mea nui a mālama i nā manaʻo ʻē aʻe. ʻO ka hope, e hoʻomanaʻo i ka hiki. ʻAʻole pono kēlā me kēia animation i kahi koho hoʻemi hoʻemi, akā nui ka poʻe e hana. ʻO ka hoʻomoʻa mua ʻana i kēia mau hoʻololi ʻana, ʻaʻole pono mākou e hoʻihoʻi hou iā lākou ma hope, a hōʻike ia i kahi pae o ka mālama e ʻike ʻia e kā mākou mea hoʻohana inā ʻaʻole lākou e haʻi.
I koʻu ʻike, ʻo ka mālama ʻana i nā hōʻailona keyframes ma ke ʻano he ʻāpana o kā mākou papa hana hoʻolālā hoʻolālā ʻo ia ka mea e paʻa ai lākou. Aia lākou i kahi, ho'ōki lākou i ka manaʻo e like me nā hopena kūikawā a lilo i ʻāpana o ka ʻōlelo hoʻolālā, kahi hoʻonui kūlohelohe o ka neʻe ʻana a me ka pane ʻana o ka huahana. ʻOpiʻi ʻana Hiki i nā animation kekahi o nā ʻāpana hauʻoli loa o ke kūkulu ʻana i nā pilina, akā me ka ʻole o ke kūkulu ʻana, hiki iā lākou ke lilo i kumu nui loa o ka huhū. Ma ka hana ʻana i nā keyframes ma ke ʻano he hōʻailona, lawe ʻoe i kahi mea maʻamau a paʻakikī e hoʻokele a hoʻololi iā ia i ʻōnaehana maopopo a hiki ke wānana. ʻAʻole wale ka waiwai maoli i ka mālama ʻana i kekahi mau laina code. Aia i loko o ka hilinaʻi i ka wā e hoʻohana ai ʻoe i kahi fade, slide, zoom, a wili paha, ʻike pono ʻoe i ke ʻano o ka hana ma waena o ka papahana. Aia i loko o ka maʻalahi e hiki mai ana mai nā waiwai maʻamau me ka ʻole o ka haunaele o nā ʻano like ʻole. A aia i loko o ka accessibility i kūkulu ʻia i ke kahua ma mua o ka hoʻohui ʻia e like mehe manao hope. Ua ʻike au i ka hana ʻana o kēia mau manaʻo i nā hui like ʻole a me nā codebase like ʻole, a ua like ke ʻano. Ke kau ʻia nā hōʻailona, hoʻopau nā keyframes i ka hōʻiliʻili ʻana i nā mea hoʻopunipuni a lilo i ʻāpana o ka ʻōlelo hoʻolālā. Hoʻonui lākou i ka manaʻo o ka huahana, ʻoi aku ka paʻa, a ʻoi aku ka ola. Inā ʻoe e lawe i hoʻokahi mea mai kēia ʻatikala, e like me kēia: pono nā animations i ka mālama like a me ke ʻano o kā mākou hāʻawi ʻana i nā kala, typography, a me ka spacing. ʻO kahi hoʻolimalima liʻiliʻi i nā hōʻailona keyframes e uku i kēlā me kēia manawa e neʻe ai kāu interface.
