CSSã ãã§ç²Ÿå¯ã§é«ããã©ãŒãã³ã¹ãªã¹ã¯ããŒã«ããŒã¹ã®ã¢ãã¡ãŒã·ã§ã³ãäœæã§ãã驿°çãªæ©èœãCSS Animation Rangeãæ·±ãæ¢æ±ããŸãããã®ããããã£ãå®çšäŸãäžçäžã®ãŠãŒã¶ãŒãæ¹ãã€ããWebäœéšãæ§ç¯ããããã®ãã¹ããã©ã¯ãã£ã¹ã解説ããŸãã
CSS Animation Rangeããã¹ã¿ãŒããïŒç²Ÿå¯ãªã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã®å¢çèšå®
Webéçºã®ãã€ãããã¯ãªäžçã§ã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæãéèŠã§ããã€ã³ã¿ã©ã¯ãã£ãã§é åçãªã€ã³ã¿ãŒãã§ãŒã¹ã¯ãã¯ãèŽ æ²¢åã§ã¯ãªããæåŸ ããããã®ãšãªã£ãŠããŸããé·å¹Žã«ãããããŠãŒã¶ãŒã®ã¹ã¯ããŒã«ã¢ã¯ã·ã§ã³ã«èŠçŽ ãåçã«åå¿ãããæŽç·Žãããã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ãäœæããã«ã¯ãè€éãªJavaScriptã©ã€ãã©ãªã«é Œãããšããã°ãã°å¿ èŠã§ããããããã®ãœãªã¥ãŒã·ã§ã³ã¯åŒ·åã§ããäžæ¹ãããã©ãŒãã³ã¹ã®ãªãŒããŒããããéçºã®è€éããå¢å€§ãããããšããããŸããã
ããã§ç»å Žããã®ããCSS Scroll-Driven Animationsã¢ãžã¥ãŒã«ãžã®ç»æçãªè¿œå æ©èœã§ããCSS Animation Rangeã§ãããã®é©åœçãªæ©èœã«ãããéçºè ã¯ç¹å®ã®ã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³äžã§ã¢ãã¡ãŒã·ã§ã³ããã€éå§ãããã€çµäºãããã®æ£ç¢ºãªå¢çãããã¹ãŠCSSå ã§çŽæ¥å®çŸ©ã§ããŸããããã¯å®£èšçã§ãããã©ãŒãã³ã¹ãé«ãããšã¬ã¬ã³ããªæ¹æ³ã§Webãã¶ã€ã³ã«åœãå¹ã蟌ããã®ã§ããã以åã¯ãã€ãã£ãCSSã ãã§ã¯é¢åã ã£ããäžå¯èœã ã£ããããã¹ã¯ããŒã«ãšãã§ã¯ãã«å¯Ÿãã詳现ãªå¶åŸ¡ãæäŸããŸãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãCSS Animation Rangeã®è€éããæ·±ãæãäžããŠãããŸãããã®ã³ã¢ã³ã³ã»ãããæ¢æ±ããããããã£ãè§£ãæãããå®çšçãªã¢ããªã±ãŒã·ã§ã³ã宿Œããé«åºŠãªãã¯ããã¯ãè°è«ããã°ããŒãã«ãªWebãããžã§ã¯ãã«ã·ãŒã ã¬ã¹ã«çµ±åããããã®ãã¹ããã©ã¯ãã£ã¹ãæäŸããŸãããã®ã¬ã€ããèªã¿çµããé ã«ã¯ãäžçäžã®ãŠãŒã¶ãŒã®ããã«çã«é åçã§é«ããã©ãŒãã³ã¹ãªã¹ã¯ããŒã«é§åäœéšãåµé ããããã®åŒ·åãªããŒã«ã掻çšã§ããããã«ãªã£ãŠããã§ãããã
ã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã®ã³ã¢ã³ã³ã»ãããçè§£ãã
animation-rangeãåæããåã«ãCSS Scroll-Driven Animationsã®ããåºãæèãšãããã解決ããåé¡ãçè§£ããããšãéèŠã§ãã
ã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã®é²å
æŽå²çã«ãWebäžã§ã¹ã¯ããŒã«ã«é£åãããšãã§ã¯ããå®çŸããã«ã¯ãããªãã®éã®JavaScriptãå¿ èŠã§ãããGSAPã®ScrollTriggerãScrollMagicã®ãããªã©ã€ãã©ãªããããã¯ã«ã¹ã¿ã ã®Intersection Observerå®è£ ã¯ãéçºè ã«ãšã£ãŠäžå¯æ¬ ãªããŒã«ãšãªããŸããããããã®ã©ã€ãã©ãªã¯çµ¶å€§ãªæè»æ§ãæäŸããŸããããããã€ãã®ãã¬ãŒããªãã䌎ããŸããïŒ
- ããã©ãŒãã³ã¹ïŒ JavaScriptããŒã¹ã®ãœãªã¥ãŒã·ã§ã³ãç¹ã«ã¹ã¯ããŒã«æã«é »ç¹ã«äœçœ®ãåèšç®ãããã®ã¯ãç¹ã«ããŒãšã³ãã®ããã€ã¹ãè€éãªããŒãžã§ãã«ã¯ã€ãïŒjankïŒãã¹ã ãŒãºãã«æ¬ ããã¢ãã¡ãŒã·ã§ã³ãåŒãèµ·ããããšããããŸããã
- è€éãïŒ ãããã®ã©ã€ãã©ãªãçµ±åã»ç®¡çããããšã¯ãäœåãªã³ãŒãå±€ã远å ããåŠç¿ã³ã¹ããšãã°ã®å¯èœæ§ãå¢å€§ãããŸããã
- 宣èšç vs. åœä»€çïŒ JavaScriptã¯ãã°ãã°åœä»€çãªã¢ãããŒãïŒããããèµ·ããããããå®è¡ãããïŒãå¿ èŠãšããŸãããCSSã¯æ¬è³ªçã«å®£èšçãªã¹ã¿ã€ã«ïŒããã®èŠçŽ ã¯ãããã®æ¡ä»¶äžã§ãã®ããã«èŠããã¹ãã ãïŒãæäŸããŸãããã€ãã£ãCSSãœãªã¥ãŒã·ã§ã³ã¯åŸè ãšããããæŽåããŸãã
CSS Scroll-Driven Animationsã®ç»å Žã¯ããããã€ãã£ãã§ãããã©ãŒãã³ã¹ãé«ãã宣èšçãªã¢ãããŒããžã®å€§ããªè»¢æãæå³ããŸãããããã®ã¢ãã¡ãŒã·ã§ã³ããã©ãŠã¶ã®ã¬ã³ããªã³ã°ãšã³ãžã³ã«ãªãããŒãããããšã§ãéçºè ã¯ããå°ãªãã³ãŒãã§ããã¹ã ãŒãºãªãšãã§ã¯ããå®çŸã§ããŸãã
animation-timelineã®å°å
¥
CSS Scroll-Driven Animationsã®åºç€ã¯animation-timelineããããã£ã«ãããŸããåºå®ãããæéã§ã¯ãªããanimation-timelineã¯æå®ãããèŠçŽ ã®ã¹ã¯ããŒã«äœçœ®ã«åºã¥ããŠã¢ãã¡ãŒã·ã§ã³ãé²è¡ãããããšãã§ããŸããããã¯äž»ã«2ã€ã®é¢æ°ãåãå
¥ããŸãïŒ
scroll()ïŒ ãã®é¢æ°ã¯ã¹ã¯ããŒã«é²è¡ã¿ã€ã ã©ã€ã³ãäœæããŸããã©ã®èŠçŽ ã®ã¹ã¯ããŒã«äœçœ®ãã¢ãã¡ãŒã·ã§ã³ãé§åããããæå®ã§ããŸããäŸãã°ãscroll(root)ã¯ããã¥ã¡ã³ãã®ã¡ã€ã³ã¹ã¯ããŒã«ã³ã³ãããæããscroll(self)ã¯èŠçŽ èªäœãã¹ã¯ããŒã«å¯èœã§ããå Žåã«ãã®èŠçŽ ãæããŸãããã®ã¿ã€ã ã©ã€ã³ã¯ã¹ã¯ããŒã«å¯èœé åã®éå§ïŒ0%ïŒããçµäºïŒ100%ïŒãŸã§ã®é²è¡ã远跡ããŸããview()ïŒ ãã®é¢æ°ã¯ãã¥ãŒé²è¡ã¿ã€ã ã©ã€ã³ãäœæããŸããã¹ã¯ããŒã«å¯èœç¯å²å šäœã远跡ããscroll()ãšã¯ç°ãªããview()ã¯ã¹ã¯ããŒã«ã³ã³ããïŒéåžžã¯ãã¥ãŒããŒãïŒå ã§ã®èŠçŽ ã®å¯èŠæ§ã远跡ããŸããã¢ãã¡ãŒã·ã§ã³ã¯èŠçŽ ããã¥ãŒã«å ¥ããééããéåºããã«ã€ããŠé²è¡ããŸããaxisïŒblockãŸãã¯inlineïŒãtargetïŒäŸïŒcover,contain,entry,exitïŒãæå®ããããšãã§ããŸãã
animation-timelineã¯ã¢ãã¡ãŒã·ã§ã³ãäœãé§åããããæ±ºå®ããŸããããã®ã¹ã¯ããŒã«é§åã¿ã€ã ã©ã€ã³ã®äžã§ãã€ã¢ãã¡ãŒã·ã§ã³ãå®éã«åçãããã¹ããã¯æå®ããŸãããããã§animation-rangeãäžå¯æ¬ ã«ãªããŸãã
animation-rangeãšã¯ïŒ
æ žå¿ãšããŠãanimation-rangeã¯ãCSSã¢ãã¡ãŒã·ã§ã³ãå®è¡ãããã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã®ç¹å®ã®ã»ã°ã¡ã³ããå®çŸ©ããããšãå¯èœã«ããŸããã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã0%ãã100%ãŸã§ã®ãã©ãã¯ãšèããŠãã ãããanimation-rangeããªããã°ãã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã«çµã³ä»ããããã¢ãã¡ãŒã·ã§ã³ã¯éåžžããã®ã¿ã€ã ã©ã€ã³ã®0-100%ã®ç¯å²å
šäœã«ããã£ãŠåçãããŸãã
ããããèŠçŽ ããã¥ãŒããŒãã«å ¥ããšãïŒäŸãã°ã20%衚瀺ãã80%衚瀺ãŸã§ïŒã«ã ããã§ãŒãã€ã³ããããå Žåã¯ã©ãã§ããããïŒãããã¯ããŠãŒã¶ãŒãç¹å®ã®ã»ã¯ã·ã§ã³ãéãéãããšãã«ã ãè€éãªå€åœ¢ãè¡ããã¹ã¯ããŒã«ããã¯ãããšéåçããããå Žåã¯ïŒ
animation-rangeã¯ããã®ç²Ÿå¯ãªå¶åŸ¡ãæäŸããŸããããã¯animation-timelineãš@keyframeså®çŸ©ãšé£æºããŠããšãã§ã¯ãã®ãã现ãããªãŒã±ã¹ãã¬ãŒã·ã§ã³ãæäŸããŸããæ¬è³ªçã«ãããã¯ç¹å®ã®ã¢ãã¡ãŒã·ã§ã³ã«å¯Ÿããã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã®ã¢ã¯ãã£ããªéšåãåºåããéå§ç¹ãšçµäºç¹ã®å€ã®ãã¢ã§ãã
ãããåŸæ¥ã®ã¿ã€ã ããŒã¹ã¢ãã¡ãŒã·ã§ã³ã«ãããanimation-durationãšæ¯èŒããŠã¿ãŠãã ãããanimation-durationã¯ã¢ãã¡ãŒã·ã§ã³ã«ãããæéãèšå®ããŸããã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã§ã¯ããæç¶æéãã¯äºå®äžãå®çŸ©ãããanimation-rangeãæšªæããã®ã«ã©ãã ãã®ã¹ã¯ããŒã«ãå¿
èŠãã«ãã£ãŠæ±ºå®ãããŸããã¹ã¯ããŒã«ãéããã°éãã»ã©ãã¢ãã¡ãŒã·ã§ã³ã¯ãã®ç¯å²ãéãåçããŸãã
animation-rangeããããã£ã®è©³çް
animation-rangeããããã£ã¯ãanimation-range-startãšanimation-range-endã®ã·ã§ãŒããã³ãã§ããããããã®è©³çްãšãããããåãå
¥ãã匷åãªå€ã®é
åãæ¢ã£ãŠã¿ãŸãããã
animation-range-startãšanimation-range-end
ãããã®ããããã£ã¯ãé¢é£ä»ããããã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³äžã§ã®ã¢ãã¡ãŒã·ã§ã³ã®ã¢ã¯ãã£ããªç¯å²ã®éå§ç¹ãšçµäºç¹ãå®çŸ©ããŸãããããã¯åå¥ã«æå®ããããšããanimation-rangeã·ã§ãŒããã³ãã䜿çšããŠçµã¿åãããããšãã§ããŸãã
animation-range-startïŒ ã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³äžã§ã¢ãã¡ãŒã·ã§ã³ãéå§ãããã¹ãç¹ãå®çŸ©ããŸããanimation-range-endïŒ ã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³äžã§ã¢ãã¡ãŒã·ã§ã³ãçµäºããã¹ãç¹ãå®çŸ©ããŸãã
ãããã®ããããã£ã«æäŸãããå€ã¯ãéžæãããanimation-timelineã«çžå¯Ÿçã§ããscroll()ã¿ã€ã ã©ã€ã³ã®å Žåãããã¯éåžžã³ã³ããã®ã¹ã¯ããŒã«é²è¡ç¶æ³ãæããŸããview()ã¿ã€ã ã©ã€ã³ã®å Žåãããã¯ãã¥ãŒããŒãããã®èŠçŽ ã®åºå
¥ããæããŸãã
ã·ã§ãŒããã³ã animation-range
ã·ã§ãŒããã³ãããããã£ã䜿çšãããšãéå§ç¹ãšçµäºç¹ã®äž¡æ¹ãç°¡æœã«èšå®ã§ããŸãïŒ
.element {\n animation-range: [ ];\n}
å€ã1ã€ã ãæäŸãããå Žåãanimation-range-startãšanimation-range-endã®äž¡æ¹ããã®åãå€ã«èšå®ãããŸããããã¯ãã¢ãã¡ãŒã·ã§ã³ããã®æç¹ã§ç¬æã«åçãããããšãæå³ããŸãïŒãã ããéåžžãé£ç¶çãªã¢ãã¡ãŒã·ã§ã³ã«ã¯æçšã§ã¯ãããŸããïŒã
animation-rangeã§åãå
¥ããããå€
ãããanimation-rangeãç䟡ãçºæ®ããå Žæã§ãããè±å¯ãªããŒã¯ãŒããšæ£ç¢ºãªæž¬å®å€ãæäŸããŸãïŒ
1. ããŒã»ã³ããŒãžïŒäŸïŒ20%, 80%ïŒ
ããŒã»ã³ããŒãžã¯ãã¢ãã¡ãŒã·ã§ã³ã®éå§ç¹ãšçµäºç¹ããç·ã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³é·ã®ããŒã»ã³ããŒãžãšããŠå®çŸ©ããŸããããã¯ç¹ã«scroll()ã¿ã€ã ã©ã€ã³ã§çŽæçã§ãã
- äŸïŒ ãŠãŒã¶ãŒãããŒãžã®äžéã»ã¯ã·ã§ã³ãã¹ã¯ããŒã«ããã«ã€ããŠèŠçŽ ããã§ãŒãã€ã³ããã¢ãã¡ãŒã·ã§ã³ã
.fade-in-middle {\n animation: fadeIn 1s linear forwards;\n animation-timeline: scroll(root);\n animation-range: 30% 70%; /* ã¹ã¯ããŒã«äœçœ®30%ã§éå§ãã70%ã§çµäº */\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}
ãã®äŸã§ã¯ãfadeInã¢ãã¡ãŒã·ã§ã³ã¯ãã«ãŒãã¹ã¯ããŒã«ã³ã³ããã®ã¹ã¯ããŒã«äœçœ®ãç·ã¹ã¯ããŒã«å¯èœé«ãã®30%ãã70%ã®éã«ããå Žåã«ã®ã¿åçãããŸãããŠãŒã¶ãŒãéãã¹ã¯ããŒã«ããã°ãã¢ãã¡ãŒã·ã§ã³ã¯ãã®ç¯å²å
ã§éãå®äºããé
ãã¹ã¯ããŒã«ããã°ããããã£ãããšåçãããŸãã
2. é·ãïŒäŸïŒ200px, 10emïŒ
é·ãã¯ãã¢ãã¡ãŒã·ã§ã³ã®éå§ç¹ãšçµäºç¹ããã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã«æ²¿ã£ã絶察è·é¢ãšããŠå®çŸ©ããŸããããã¯äžè¬çãªããŒãžã®ã¹ã¯ããŒã«ã«ã¯ããŸã䜿çšãããŸããããç¹å®ã®èŠçŽ ã®äœçœ®ã«é£åããã¢ãã¡ãŒã·ã§ã³ããåºå®ãµã€ãºã®ã¹ã¯ããŒã«ã³ã³ãããæ±ãå Žåã«äŸ¿å©ã§ãã
- äŸïŒ æ°Žå¹³ã¹ã¯ããŒã«ããç»åã®ã£ã©ãªãŒã§ãæåã®500pxã®ã¹ã¯ããŒã«ã«ããã£ãŠåçãããã¢ãã¡ãŒã·ã§ã³ã
.gallery-caption {\n animation: slideCaption 1s linear forwards;\n animation-timeline: scroll(self horizontal);\n animation-range: 0px 500px;\n}\n\n@keyframes slideCaption {\n from { transform: translateX(100px); opacity: 0; }\n to { transform: translateX(0); opacity: 1; }\n}
3. view()ã¿ã€ã ã©ã€ã³çšã®ããŒã¯ãŒã
ãããã®ããŒã¯ãŒãã¯ãview()ã¿ã€ã ã©ã€ã³ãšäœµçšãããšç¹ã«åŒ·åã§ãèŠçŽ ããã¥ãŒããŒããã¹ã¯ããŒã«ã³ã³ããã«åºå
¥ãããéã®ã¢ãã¡ãŒã·ã§ã³ã®æåã粟å¯ã«å¶åŸ¡ã§ããŸãã
entryïŒ èŠçŽ ã®ã¹ã¯ããŒã«ããŒãå¢çãããã®ã³ã³ãããããã¯ã®entryãã€ã³ããééãããšãã«ã¢ãã¡ãŒã·ã§ã³ç¯å²ãéå§ããŸããããã¯éåžžãèŠçŽ ã®æåã®ç«¯ããã¥ãŒããŒãã«çŸãå§ãããšããæå³ããŸããexitïŒ èŠçŽ ã®ã¹ã¯ããŒã«ããŒãå¢çãããã®ã³ã³ãããããã¯ã®exitãã€ã³ããééãããšãã«ã¢ãã¡ãŒã·ã§ã³ç¯å²ãçµäºããŸããããã¯éåžžãèŠçŽ ã®æåŸã®ç«¯ããã¥ãŒããŒãããæ¶ãããšããæå³ããŸããcoverïŒ èŠçŽ ãã¹ã¯ããŒã«ã³ã³ããããã¥ãŒããŒããèŠã£ãŠããå šæéã«ããã£ãŠã¢ãã¡ãŒã·ã§ã³ãåçãããŸããèŠçŽ ã®å é ãã¹ã¯ããŒã«ããŒãã«å ¥ã£ããšãã«éå§ããæ«å°Ÿãåºããšãã«çµäºããŸããããã¯èŠçŽ ããã¥ãŒå ã«ããã¢ãã¡ãŒã·ã§ã³ã«ãšã£ãŠããã°ãã°ããã©ã«ããŸãã¯æãçŽæçãªæåã§ããcontainïŒ èŠçŽ ãã¹ã¯ããŒã«ã³ã³ãã/ãã¥ãŒããŒãå ã«å®å šã«åãŸã£ãŠããéãã¢ãã¡ãŒã·ã§ã³ãåçãããŸããèŠçŽ ãå®å šã«è¡šç€ºããããšãã«éå§ãããã®äžéšãåºå§ãããšçµäºããŸããstartïŒentryã«äŒŒãŠããŸãããç¹ã«èŠçŽ ã«å¯Ÿããã¹ã¯ããŒã«ããŒãã®éå§ç«¯ãæããŸããendïŒexitã«äŒŒãŠããŸãããç¹ã«èŠçŽ ã«å¯Ÿããã¹ã¯ããŒã«ããŒãã®çµäºç«¯ãæããŸãã
ãããã®ããŒã¯ãŒãã¯ãé·ããããŒã»ã³ããŒãžã®ãªãã»ãããšçµã¿åãããããšãã§ããããã«çްããå¶åŸ¡ãæäŸããŸããäŸãã°ãentry 20%ã¯ãèŠçŽ ããã¥ãŒããŒãã«20%å
¥ã£ããšãã«ã¢ãã¡ãŒã·ã§ã³ãéå§ããããšãæå³ããŸãã
- äŸïŒ ããŒããŒã»ã¯ã·ã§ã³ããèŠããã«ã€ããŠè²ãå€ããã¹ãã£ãããŒããã²ãŒã·ã§ã³ããŒã
.hero-section {\n height: 500px;\n /* ... ãã®ä»ã®ã¹ã¿ã€ã« ... */\n}\n\n.sticky-nav {\n position: sticky;\n top: 0;\n animation: navColorChange 1s linear forwards;\n animation-timeline: view(); /* ã¹ã¯ããŒã«ããŒãå
ã§ã®èªèº«ã®ãã¥ãŒã«çžå¯Ÿ */\n animation-range: cover;\n}\n\n@keyframes navColorChange {\n 0% { background-color: transparent; color: white; }\n 100% { background-color: #333; color: gold; }\n}
ãã®ã·ããªãªã§ã¯ã.sticky-navèŠçŽ ïŒãŸãã¯ãããçµã³ã€ããŠããview()ã¿ã€ã ã©ã€ã³ãæã€èŠçŽ ïŒããã¥ãŒããŒããèŠãã«ã€ããŠãnavColorChangeã¢ãã¡ãŒã·ã§ã³ãé²è¡ããŸãã
- äŸïŒ ãã¥ãŒããŒãã«å ¥ããšåŸ®åŠã«æ¡å€§ããåºããšçž®å°ããç»åã
.image-wrapper {\n animation: scaleOnView 1s linear forwards;\n animation-timeline: view();\n animation-range: entry 20% cover 80%; /* èŠçŽ ã20%衚瀺ãããæç¹ã§éå§ãããã¥ãŒã80%èŠããŸã§åç */\n}\n\n@keyframes scaleOnView {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); } /* ã»ãŒäžå€®ã«ãããšãã«æå€§ã¹ã±ãŒã« */\n 100% { transform: scale(1); }\n}
ããã¯ãanimation-rangeãview()ã¿ã€ã ã©ã€ã³ã®äžéšã@keyframesã¢ãã¡ãŒã·ã§ã³ã®ç°ãªã段éã«ã©ã®ããã«ãããã³ã°ã§ãããã瀺ããŠããŸãã
4. normalïŒããã©ã«ãïŒ
normalããŒã¯ãŒãã¯animation-rangeã®ããã©ã«ãå€ã§ããããã¯ãã¢ãã¡ãŒã·ã§ã³ãéžæãããã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã®å
šé·ïŒ0%ãã100%ïŒã«ããã£ãŠå®è¡ãããã¹ãã§ããããšã瀺ããŸãã
å€ãã®å Žåã«é©ããŠããŸãããnormalã¯è€éãªãšãã§ã¯ãã«å¿
èŠãªæ£ç¢ºãªã¿ã€ãã³ã°ãæäŸããªããããããŸããããŸãã«ãã®çç±ããanimation-rangeã¯ãã詳现ãªå¶åŸ¡ãæäŸããŸãã
å®çšçãªã¢ããªã±ãŒã·ã§ã³ãšãŠãŒã¹ã±ãŒã¹
animation-rangeã®åã¯ãæå°éã®åŽåãšæå€§ã®ããã©ãŒãã³ã¹ã§ãæŽç·Žãããã€ã³ã¿ã©ã¯ãã£ããªã¹ã¯ããŒã«ãšãã§ã¯ããå®çŸããèœåã«ãããŸããeã³ããŒã¹ãµã€ãããæè²ãã©ãããã©ãŒã ãŸã§ãäžçèŠæš¡ã§ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããé
åçãªãŠãŒã¹ã±ãŒã¹ãæ¢ã£ãŠã¿ãŸãããã
ãã©ã©ãã¯ã¹ïŒèŠå·®ïŒã¹ã¯ããŒã«å¹æ
èæ¯ã³ã³ãã³ãã忝ã³ã³ãã³ããšã¯ç°ãªãé床ã§åããã©ã©ãã¯ã¹ã¯ã奥è¡ãã®é¯èŠãçã¿åºããŸããåŸæ¥ãããã¯JavaScriptã®äž»èŠãªåè£ã§ãããanimation-rangeã䜿ãã°ãã¯ããã«ã·ã³ãã«ã«ãªããŸãã
æ
è¡ãµã€ããç®çå°ã玹ä»ããŠãããšæ³åããŠãã ããããŠãŒã¶ãŒãã¹ã¯ããŒã«ãããšãéœåžã®ã¹ã«ã€ã©ã€ã³ã®èæ¯ç»åããã£ãããšç§»åããããã¹ãããã¿ã³ã®ãããªåæ¯èŠçŽ ã¯éåžžã®ããŒã¹ã§åããŸããscroll(root)ã¿ã€ã ã©ã€ã³ãå®çŸ©ããå®çŸ©ãããanimation-rangeã§transform: translateY()ã¢ãã¡ãŒã·ã§ã³ãé©çšããããšã§ãè€éãªèšç®ãªãã«ã¹ã ãŒãºãªãã©ã©ãã¯ã¹ãå®çŸã§ããŸãã
.parallax-background {\n animation: moveBackground var(--parallax-speed) linear forwards;\n animation-timeline: scroll(root);\n animation-range: 0% 100%; /* ãŸãã¯ç¹å®ã®ã»ã¯ã·ã§ã³ã®ç¯å² */\n}\n\n@keyframes moveBackground {\n from { transform: translateY(0); }\n to { transform: translateY(-100px); } /* å
šã¹ã¯ããŒã«ã«ããã£ãŠ100pxäžã«ç§»å */\n}
animation-rangeã¯ããã©ã©ãã¯ã¹å¹æãããã¥ã¡ã³ãå
šäœã®ã¹ã¯ããŒã«ãšåæããããšãä¿èšŒããæµåçã§æ²¡å
¥æã®ããäœéšãæäŸããŸãã
èŠçŽ ã®è¡šç€ºã¢ãã¡ãŒã·ã§ã³
äžè¬çãªUIãã¿ãŒã³ã¯ãèŠçŽ ããŠãŒã¶ãŒã®ãã¥ãŒããŒãã«å ¥ããšãã«è¡šç€ºïŒãã§ãŒãã€ã³ãã¹ã©ã€ãã¢ãããå±éïŒããããšã§ããããã¯æ°ããã³ã³ãã³ãã«æ³šæãåŒããé²è¡æãçã¿åºããŸãã
ãªã³ã©ã€ã³ã³ãŒã¹ã®ãã©ãããã©ãŒã ãèããŠã¿ãŸãããããŠãŒã¶ãŒãã¬ãã¹ã³ãã¹ã¯ããŒã«ããŠãããšãåæ°ããã»ã¯ã·ã§ã³ã®ã¿ã€ãã«ãç»åãåªé
ã«ãã§ãŒãã€ã³ããã¹ã©ã€ãã€ã³ããŠããŸããanimation-timeline: view()ãanimation-range: entry 0% cover 50%ãšå
±ã«äœ¿çšããããšã§ãèŠçŽ ããã¥ãŒããŒãã«å
¥ãããã®äžéç¹ã«éããã«ã€ããŠãå®å
šã«éæãªç¶æ
ããå®å
šã«äžéæã«ãªãããã«æç€ºã§ããŸãã
.reveal-item {\n opacity: 0;\n transform: translateY(50px);\n animation: revealItem 1s linear forwards;\n animation-timeline: view();\n animation-range: entry 10% cover 50%; /* 10%衚瀺ãããæç¹ã§éå§ãã50%衚瀺ãããæç¹ã§çµäº */\n}\n\n@keyframes revealItem {\n to { opacity: 1; transform: translateY(0); }\n}
ãã®ã¢ãããŒãã¯ãeã³ããŒã¹ãµã€ãã®åå説æã§ããããã¥ãŒã¹ããŒã¿ã«ã®ããã°èšäºã»ã¯ã·ã§ã³ã§ãããã³ã³ãã³ãã®èªã¿èŸŒã¿ããããã€ãããã¯ã§é åçã«æããããŸãã
ããã°ã¬ã¹ã€ã³ãžã±ãŒã¿ãŒ
é·ãèšäºããŠãŒã¶ãŒããã¥ã¢ã«ããŸãã¯è€æ°ã¹ãããã®ãã©ãŒã ã§ã¯ãããã°ã¬ã¹ã€ã³ãžã±ãŒã¿ãŒããŠãŒã¶ãŒã«çŸåšå°ãšæ®ãéã瀺ãããšã§ããŠãŒã¶ããªãã£ãå€§å¹ ã«åäžãããããšãã§ããŸããäžè¬çãªãã¿ãŒã³ã¯ããã¥ãŒããŒãã®äžéšã«ããèªæžé²è¡ç¶æ³ããŒã§ãã
ããŒãžã®äžéšã«çްãããŒãäœæãããã®å¹
ãããã¥ã¡ã³ãã®ã¹ã¯ããŒã«é²è¡ç¶æ³ã«ãªã³ã¯ãããããšãã§ããŸããanimation-timeline: scroll(root)ãšanimation-range: 0% 100%ã䜿çšãããšããŠãŒã¶ãŒãããŒãžã®äžããäžãŸã§ã¹ã¯ããŒã«ããã«ã€ããŠãããŒã®å¹
ã0%ãã100%ã«æ¡å€§ããŸãã
.progress-bar {\n position: fixed;\n top: 0; left: 0;\n height: 5px;\n background-color: #007bff;\n width: 0%; /* åæç¶æ
*/\n animation: fillProgress 1s linear forwards;\n animation-timeline: scroll(root);\n animation-range: 0% 100%;\n z-index: 1000;\n}\n\n@keyframes fillProgress {\n to { width: 100%; }\n}
ããã¯ãã³ã³ãã³ãã®å€ãããŒãžã§ã®ããã²ãŒã·ã§ã³ãæ¹åãããŠãŒã¶ãŒã®äžæºãæžããæç¢ºãªèŠèŠçåå³ãæäŸããã°ããŒãã«ãªã³ã³ãã³ãæ¶è²»ã«ãšã£ãŠäŸ¡å€ã®ããæ©èœã§ãã
è€éãªå€æ®µéã¢ãã¡ãŒã·ã§ã³
animation-rangeã¯ãåäžã®ã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã®ç¹å®ã®ãéãªããªãã»ã°ã¡ã³ãäžã§ç°ãªãã¢ãã¡ãŒã·ã§ã³ãåçããå¿
èŠãããè€éãªã·ãŒã±ã³ã¹ãç·šæãããšãã«ç䟡ãçºæ®ããŸãã
ãåœç€Ÿã®æŽå²ãããŒãžãæ³åããŠãã ããããŠãŒã¶ãŒãã¹ã¯ããŒã«ãããšãããã€ã«ã¹ããŒã³ãã»ã¯ã·ã§ã³ãééããŸããåãã€ã«ã¹ããŒã³ã¯ç¬èªã®ã¢ãã¡ãŒã·ã§ã³ãããªã¬ãŒã§ããŸãïŒ
- ãã€ã«ã¹ããŒã³1ïŒ ã°ã©ãã£ãã¯ãåè»¢ã»æ¡å€§ããïŒ
animation-range: 10% 20%ïŒ - ãã€ã«ã¹ããŒã³2ïŒ ã¿ã€ã ã©ã€ã³èŠçŽ ãæšªããã¹ã©ã€ãã€ã³ããïŒ
animation-range: 30% 40%ïŒ - ãã€ã«ã¹ããŒã³3ïŒ åŒçšã®å¹ãåºãããããã¢ããããïŒ
animation-range: 50% 60%ïŒ
ç¯å²ãæ éã«å®çŸ©ããããšã§ããŸãšãŸãã®ããã€ã³ã¿ã©ã¯ãã£ããªç©èªäœéšãäœãåºãããŠãŒã¶ãŒãã¹ã¯ããŒã«ããã«ã€ããŠç°ãªãã³ã³ãã³ãã«æ³šæãå°ãããšãã§ããŸãã
.milestone-1-graphic {\n animation: rotateExpand 1s linear forwards;\n animation-timeline: scroll(root);\n animation-range: 10% 20%;\n}\n.milestone-2-timeline {\n animation: slideIn 1s linear forwards;\n animation-timeline: scroll(root);\n animation-range: 30% 40%;\n}\n/* ... ãªã© ... */\n
ãã®ã¬ãã«ã®å¶åŸ¡ã«ããã倿§ãªãªãŒãã£ãšã³ã¹ã«é¿ããé«åºŠã«ã«ã¹ã¿ãã€ãºãããã©ã³ãåãããã¹ããŒãªãŒããªã³ã°äœéšãå¯èœã«ãªããŸãã
ã€ã³ã¿ã©ã¯ãã£ããªã¹ããŒãªãŒããªã³ã°
åçŽãªè¡šç€ºã¢ãã¡ãŒã·ã§ã³ãè¶
ããŠãanimation-rangeã¯ã補åã®ã©ã³ãã£ã³ã°ããŒãžãç·šéã³ã³ãã³ãã§ããèŠãããããªããã§ã€ã³ã¿ã©ã¯ãã£ããªç©èªã容æã«ããŸããèŠçŽ ã¯ããŠãŒã¶ãŒãã¹ããŒãªãŒãã¹ã¯ããŒã«ããã«ã€ããŠãæ¡å€§ãçž®å°ãè²å€æŽãããã«ã¯ç°ãªã圢ç¶ã«å€åœ¢ããããšãã§ããŸãã
補åçºè¡šããŒãžãèããŠã¿ãŸãããããŠãŒã¶ãŒãäžã«ã¹ã¯ããŒã«ãããšã補åç»åããã£ãããšå転ããŠç°ãªãè§åºŠãèŠããåæã«æ©èœããã¹ãããã§ãŒãã€ã³ããŸãããã®éå±€çãªã¢ãããŒãã¯ããŠãŒã¶ãŒãåŒãã€ãç¶ããå®å šãªãããªãå¿ èŠãšããã«æ å ±ãåçã«æç€ºããæ¹æ³ãæäŸããŸãã
animation-rangeãæäŸãã粟å¯ãªå¶åŸ¡ã«ããããã¶ã€ããŒãšéçºè
ã¯ãããã®äœéšãæå³éãã«æ¯ãä»ããã¹ã¯ããŒã«é床ã«é¢ä¿ãªãããŠãŒã¶ãŒã«ãšã£ãŠã¹ã ãŒãºã§æå³çãªãããŒã確ä¿ã§ããŸãã
ã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã®èšå®æ¹æ³
animation-rangeã䜿çšããŠCSSã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ãå®è£
ããã«ã¯ãããã€ãã®éèŠãªã¹ããããå«ãŸããŸããåºæ¬çãªã³ã³ããŒãã³ããèŠãŠãããŸãããã
scroll()ãšview()ã¿ã€ã ã©ã€ã³å蚪
æåã®æ±ºå®ã¯ãã¢ãã¡ãŒã·ã§ã³ãã©ã®ã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã«ãã€ã³ããããã§ãïŒ
scroll()ïŒ ããã¥ã¡ã³ãå šäœã®ã¹ã¯ããŒã«ãç¹å®ã®ã³ã³ããã®ã¹ã¯ããŒã«ã«å¿çããã¢ãã¡ãŒã·ã§ã³ã«æé©ã§ãã- æ§æïŒ
scroll([|| ]?)
äŸïŒã¡ã€ã³ããã¥ã¡ã³ãã®ã¹ã¯ããŒã«ã«ã¯scroll(root)ãèŠçŽ èªèº«ã®ã¹ã¯ããŒã«ã³ã³ããã«ã¯scroll(self)ãã«ã¹ã¿ã èŠçŽ ã®åçŽã¹ã¯ããŒã«ã«ã¯scroll(my-element-id y)ã view()ïŒ ã¹ã¯ããŒã«ã³ã³ããïŒéåžžã¯ãã¥ãŒããŒãïŒå ã§ã®èŠçŽ ã®å¯èŠæ§ã«ãã£ãŠããªã¬ãŒãããã¢ãã¡ãŒã·ã§ã³ã«æé©ã§ãã- æ§æïŒ
view([|| ]?)
äŸïŒããã©ã«ãã®ãã¥ãŒããŒãã¿ã€ã ã©ã€ã³ã«ã¯view()ããããã¯è»žã®å¯èŠæ§ã«é£åããã¢ãã¡ãŒã·ã§ã³ã«ã¯view(block)ã芪/ç¥å èŠçŽ ã§view-timeline-nameã䜿çšããŠãã¥ãŒã¿ã€ã ã©ã€ã³ã«ååãä»ããããšãã§ããŸãã
éèŠãªã®ã¯ãanimation-timelineã¯ã¢ãã¡ãŒã·ã§ã³ããããèŠçŽ ã«é©çšãããã¹ãã§ãããå¿
ãããã¹ã¯ããŒã«ã³ã³ããèªäœã«é©çšãããããã§ã¯ãªããšããããšã§ãïŒãã®èŠçŽ ãã¹ã¯ããŒã«ã³ã³ããã§ããå Žåãé€ãïŒã
@keyframesã«ããã¢ãã¡ãŒã·ã§ã³ã®å®çŸ©
ã¢ãã¡ãŒã·ã§ã³ã®èŠèŠçãªå€æŽã¯ãæšæºã®@keyframesã«ãŒã«ã䜿çšããŠå®çŸ©ãããŸããç°ãªãã®ã¯ããããã®ããŒãã¬ãŒã ãã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã«ã©ã®ããã«ãããã³ã°ããããã§ãã
ã¢ãã¡ãŒã·ã§ã³ãã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã«ãªã³ã¯ããããšã@keyframeså
ã®ããŒã»ã³ããŒãžïŒ0%ãã100%ïŒã¯ãã¯ãæéã衚ããŸããã代ããã«ãæå®ãããanimation-rangeã®é²è¡ç¶æ³ã衚ããŸããanimation-rangeã20% 80%ã®å Žåã@keyframesã®0%ã¯ã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã®20%ã«çžåœãã@keyframesã®100%ã¯ã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã®80%ã«çžåœããŸãã
ããã¯åŒ·åãªæŠå¿µç転æã§ãïŒããŒãã¬ãŒã ã¯ã¢ãã¡ãŒã·ã§ã³ã®å®å
šãªã·ãŒã±ã³ã¹ãå®çŸ©ããanimation-rangeã¯ãã®ã·ãŒã±ã³ã¹ãç¹å®ã®ã¹ã¯ããŒã«ã»ã°ã¡ã³ãã«ã¯ãªããããŠãããã³ã°ããŸãã
animation-timelineãšanimation-rangeã®é©çš
å®è·µçãªäŸã§å šäœããŸãšããŠã¿ãŸãããïŒãã¥ãŒããŒãã§å®å šã«è¡šç€ºãããã«ã€ããŠãããã«æ¡å€§ãããã®åŸé¢ãããšãã«çž®å°ããèŠçŽ ã
HTMLæ§é ïŒ
\n \n Hello World\n \n
CSSã¹ã¿ã€ãªã³ã°ïŒ
.animated-element {\n height: 200px;\n width: 200px;\n background-color: lightblue;\n margin: 500px auto;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1.5em;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n\n /* ã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã®äž»èŠãããã㣠*/\n animation: scaleOnView 1s linear forwards;\n animation-timeline: view(); /* ãã®èŠçŽ ããã¥ãŒã«åºå
¥ãããã«ã€ããŠã¢ãã¡ãŒã·ã§ã³ãé²è¡ */\n animation-range: entry 20% cover 80%; /* ã¢ãã¡ãŒã·ã§ã³ã¯èŠçŽ ã20%衚瀺ãããæç¹ããå§ãŸãããã¥ãŒã80%èŠããŸã§å®è¡ */\n}\n\n@keyframes scaleOnView {\n 0% { transform: scale(0.8); opacity: 0; }\n 50% { transform: scale(1.1); opacity: 1; } /* ã¢ã¯ãã£ãç¯å²ã®äžéãããã§ã¹ã±ãŒã«ãšäžéæåºŠãããŒã¯ã« */\n 100% { transform: scale(0.9); opacity: 1; }\n}
ãã®äŸã§ã¯ïŒ
animation-timeline: view()ã¯ãã¢ãã¡ãŒã·ã§ã³ã.animated-elementã®ãã¥ãŒããŒãå ã§ã®å¯èŠæ§ã«ãã£ãŠé§åãããããšãä¿èšŒããŸããanimation-range: entry 20% cover 80%ã¯ãã¢ãã¡ãŒã·ã§ã³ã®ã¢ã¯ãã£ããŸãŒã³ãå®çŸ©ããŸãïŒèŠçŽ ããã¥ãŒããŒãã«20%å ¥ã£ããšãïŒãã®å é ããïŒã«éå§ããèŠçŽ ããã¥ãŒããŒãã80%èŠããŸã§ïŒãã®å é ããïŒåçãããŸãã@keyframes scaleOnViewã¯å€åœ¢ãå®çŸ©ããŸããããŒãã¬ãŒã ã®0%ã¯ãã¥ãŒã¿ã€ã ã©ã€ã³ã®entry 20%ã«ãããã³ã°ãããããŒãã¬ãŒã ã®50%ã¯`entry 20%`ãã`cover 80%`ã®ç¯å²ã®äžéç¹ã«ãããã³ã°ããã100%ã¯cover 80%ã«ãããã³ã°ãããŸããanimation-duration: 1sãšanimation-fill-mode: forwardsãäŸç¶ãšããŠéèŠã§ããæç¶æéã¯ãéåºŠä¹æ°ããšããŠæ©èœããŸããé·ãæç¶æéã¯ãç¹å®ã®ã¹ã¯ããŒã«è·é¢ã«å¯ŸããŠã¢ãã¡ãŒã·ã§ã³ããã®ç¯å²å ã§ããé ãèŠããããã«ããŸããforwardsã¯ãã¢ãã¡ãŒã·ã§ã³ã®æçµç¶æ ãæç¶ããããšãä¿èšŒããŸãã
ãã®èšå®ã¯ãçŽç²ãªCSSã§ã¹ã¯ããŒã«ããŒã¹ã®ã¢ãã¡ãŒã·ã§ã³ãå¶åŸ¡ããããã®éåžžã«åŒ·åã§çŽæçãªæ¹æ³ãæäŸããŸãã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
åºæ¬ãè¶
ããŠãanimation-rangeã¯ä»ã®CSSã¢ãã¡ãŒã·ã§ã³ããããã£ãšã·ãŒã ã¬ã¹ã«çµ±åããããã©ãŒãã³ã¹ãšäºææ§ã®èæ
®ãèŠæ±ããŸãã
animation-rangeãšanimation-durationãanimation-fill-modeã®çµã¿åãã
ã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã«ã¯ïŒã¹ã¯ããŒã«é床ã«äŸåããããïŒäŒçµ±çãªæå³ã§ã®åºå®ããããæç¶æéãã¯ãããŸããããanimation-durationã¯äŸç¶ãšããŠéèŠãªåœ¹å²ãæãããŸããããã¯ãã¢ãã¡ãŒã·ã§ã³ãæå®ãããç¯å²ã§ãéåžžãã®ããŒã¹ã§åçãããå Žåã«ãå®å
šãªããŒãã¬ãŒã ã·ãŒã±ã³ã¹ãå®äºããããã®ãç®æšæç¶æéããå®çŸ©ããŸãã
animation-durationãé·ããšãæå®ãããanimation-rangeäžã§ã¢ãã¡ãŒã·ã§ã³ãããé ãåçãããããã«èŠããŸããanimation-durationãçããšãæå®ãããanimation-rangeäžã§ã¢ãã¡ãŒã·ã§ã³ãããéãåçãããããã«èŠããŸãã
animation-fill-modeããŸãéèŠã§ããforwardsã¯ãã¢ã¯ãã£ããªanimation-rangeãééããåŸã«ã¢ãã¡ãŒã·ã§ã³ã®æçµç¶æ
ãæç¶ããããšãä¿èšŒããããã«ãã䜿çšãããŸããããããªããšããŠãŒã¶ãŒãå®çŸ©ãããç¯å²å€ã«ã¹ã¯ããŒã«ãããšãèŠçŽ ãå
ã®ç¶æ
ã«ã¹ãããããã¯ããå¯èœæ§ããããŸãã
äŸãã°ãèŠçŽ ããã¥ãŒããŒãã«å
¥ã£ãåŸããã§ãŒãã€ã³ãããŸãŸã§ããŠã»ããå Žåãanimation-fill-mode: forwardsã¯äžå¯æ¬ ã§ãã
1ã€ã®èŠçŽ ã«å¯Ÿããè€æ°ã®ã¢ãã¡ãŒã·ã§ã³ã®åŠç
1ã€ã®èŠçŽ ã«è€æ°ã®ã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ãé©çšã§ããŸããããã¯ãanimation-nameãanimation-timelineãanimation-rangeïŒããã³ãã®ä»ã®ã¢ãã¡ãŒã·ã§ã³ããããã£ïŒã«ã«ã³ãåºåãã®å€ã®ãªã¹ããæäŸããããšã§å®çŸãããŸãã
äŸãã°ãããèŠçŽ ããã¥ãŒã«å ¥ããšãã«ãã§ãŒãã€ã³ãããã¥ãŒãèŠããšãã«å転ãããšãã2ã€ã®åäœãåæã«è¡ãããšãã§ããŸãïŒ
.multi-animated-item {\n animation-name: fadeIn, rotateItem;\n animation-duration: 1s, 2s;\n animation-timeline: view(), view();\n animation-range: entry 0% cover 50%, cover;\n animation-fill-mode: forwards, forwards;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes rotateItem {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}
ããã¯ãèŠçŽ ã®å€èгã®ç°ãªãåŽé¢ãã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ã®ç°ãªãã»ã°ã¡ã³ãã«ãã£ãŠå¶åŸ¡ã§ããã粟å¯ãªãªãŒã±ã¹ãã¬ãŒã·ã§ã³ã®åã瀺ããŠããŸãã
ããã©ãŒãã³ã¹ãžã®åœ±é¿
animation-rangeãå«ãCSS Scroll-Driven Animationsã®äž»ãªå©ç¹ã®1ã€ã¯ããã®åºæã®ããã©ãŒãã³ã¹äžã®å©ç¹ã§ããã¹ã¯ããŒã«é£åããžãã¯ãJavaScriptãããã©ãŠã¶ã®ã¬ã³ããªã³ã°ãšã³ãžã³ã«ç§»åããããšã§ïŒ
- ã¡ã€ã³ã¹ã¬ããã®ãªãããŒãïŒ ã¢ãã¡ãŒã·ã§ã³ã¯ã³ã³ããžã¿ã¹ã¬ããã§å®è¡ã§ãããããã¡ã€ã³ã®JavaScriptã¹ã¬ãããä»ã®ã¿ã¹ã¯ã®ããã«è§£æŸãããããã¹ã ãŒãºãªã€ã³ã¿ã©ã¯ã·ã§ã³ã«ã€ãªãããŸãã
- æé©åãããã¬ã³ããªã³ã°ïŒ ãã©ãŠã¶ã¯CSSã¢ãã¡ãŒã·ã§ã³ãšå€åœ¢ã«å¯ŸããŠé«åºŠã«æé©åãããŠããããã°ãã°GPUã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã掻çšããŸãã
- ã«ã¯ã€ãïŒJankïŒã®åæžïŒ ã¹ã¯ããŒã«ã€ãã³ãã«å¯ŸããJavaScriptãžã®äŸåãæžãããšã§ãã¹ã¯ããŒã«ã€ãã³ããªã¹ããŒãéè² è·ã«ãªã£ããšãã«çºçããå¯èœæ§ã®ãããã«ã¯ã€ããïŒéåããããã¡ãªãïŒãå€§å¹ ã«åæžã§ããŸãã
ããã¯ãããæµåçã§å¿çæ§ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããç¹ã«å€æ§ãªããã€ã¹ããããã¯ãŒã¯ç¶æ³ã§ãŠã§ããµã€ãã«ã¢ã¯ã»ã¹ããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«ãšã£ãŠéèŠã§ãã
ãã©ãŠã¶ã®äºææ§
2023幎åŸåãã2024幎åé çŸåšãCSS Scroll-Driven AnimationsïŒanimation-timelineãšanimation-rangeãå«ãïŒã¯ãäž»ã«ChromiumããŒã¹ã®ãã©ãŠã¶ïŒChromeãEdgeãOperaãBraveãªã©ïŒã§ãµããŒããããŠããŸãã
çŸåšã®ç¶æ³ïŒ
- ChromeïŒ å®å šãµããŒãïŒChrome 115以éïŒ
- EdgeïŒ å®å šãµããŒã
- FirefoxïŒ éçºäž / ãã©ã°ä»ãã§æå¹åå¯èœ
- SafariïŒ éçºäž / ãã©ã°ä»ãã§æå¹åå¯èœ
ãã©ãŒã«ããã¯æŠç¥ïŒ
- ãã£ãŒãã£ãŒã¯ãšãªïŒ
@supportsïŒïŒ@supports (animation-timeline: scroll())ã䜿çšããŠããµããŒããããŠããå Žåã«ã®ã¿ã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ãé©çšããŸãããµããŒããããŠããªããã©ãŠã¶ã«ã¯ãããã·ã³ãã«ãªãã¢ãã¡ãŒã·ã§ã³ãªããŸãã¯JavaScriptããŒã¹ã®ãã©ãŒã«ããã¯ãæäŸããŸãã - ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãïŒ ãããã®é«åºŠãªã¢ãã¡ãŒã·ã§ã³ããªããŠããã³ã³ãã³ããå®å šã«ã¢ã¯ã»ã¹å¯èœã§çè§£ã§ããããã«èšèšããŸããã¢ãã¡ãŒã·ã§ã³ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããã¹ããã®ã§ãããå¿ é ã§ãã£ãŠã¯ãªããŸããã
Webæšæºã®æ¥éãªé²åãèãããšãè¿ãå°æ¥ãããåºç¯ãªãã©ãŠã¶ãµããŒããæåŸ ãããŸããææ°ã®äºææ§æ å ±ã«ã€ããŠã¯ãCan I Use...ã®ãããªãªãœãŒã¹ã泚èŠããããšããå§ãããŸãã
ã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã®ãããã°
ãããã®ã¢ãã¡ãŒã·ã§ã³ã®ãããã°ã¯æ°ããçµéšã«ãªããããããŸãããææ°ã®ãã©ãŠã¶éçºããŒã«ãç¹ã«Chromiumã§ã¯ãåªãããµããŒããæäŸããããã«é²åããŠããŸãïŒ
- Animationsã¿ãïŒ Chrome DevToolsã®ãAnimationsãã¿ãã¯éåžžã«äŸ¡å€ããããŸãããã¹ãŠã®ã¢ã¯ãã£ããªã¢ãã¡ãŒã·ã§ã³ã衚瀺ããäžæåæ¢ãåçãã¹ã¯ã©ããå¯èœã§ããã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã®å Žåãã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ãšã¢ã¯ãã£ããªç¯å²ã®èŠèŠçãªè¡šçŸããã°ãã°æäŸããŸãã
- Elementsããã«ïŒ ãElementsãããã«ã§èŠçŽ ãã€ã³ã¹ãã¯ããããStylesãã¿ããèŠããšãé©çšãããŠãã
animation-timelineãšanimation-rangeããããã£ã衚瀺ãããŸãã - Scroll-timelineãªãŒããŒã¬ã€ïŒ äžéšã®ãã©ãŠã¶ã§ã¯ãã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³ãããŒãžäžã«çŽæ¥èŠèŠåããå®éšçãªãªãŒããŒã¬ã€ãæäŸããŠãããã¹ã¯ããŒã«äœçœ®ãã¢ãã¡ãŒã·ã§ã³ã®é²è¡ã«ã©ã®ããã«ãããã³ã°ãããããçè§£ããã®ã«åœ¹ç«ã¡ãŸãã
ãããã®ããŒã«ã«æ £ããããšã§ãéçºãšæŽç·Žã®ããã»ã¹ãå€§å¹ ã«ã¹ããŒãã¢ããããŸãã
ã°ããŒãã«å®è£ ã®ããã®ãã¹ããã©ã¯ãã£ã¹
animation-rangeã¯ä¿¡ããããªãã»ã©ã®åµé çèªç±ãæäŸããŸãããäžçäžã®ããããèæ¯ãããã€ã¹ã®ãŠãŒã¶ãŒã«ããžãã£ããªäœéšãä¿èšŒããããã«ã¯ã責任ããå®è£
ãéµãšãªããŸãã
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
åãã¯ãäžéšã®ãŠãŒã¶ãŒãç¹ã«ååºé害ãä¹ãç©é ããæã€äººã ã«ãšã£ãŠãæ¹åæèŠã倱ãããããæå®³ã§ããããå¯èœæ§ããããŸããåžžã«èæ ®ãã¹ãããšïŒ
prefers-reduced-motionã¡ãã£ã¢ã¯ãšãªïŒ ãŠãŒã¶ãŒã®å¥œã¿ãå°éããŸãããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã®èšå®ã§ãåããæžããããæå¹ã«ããŠãããŠãŒã¶ãŒã«å¯ŸããŠã¯ãã¢ãã¡ãŒã·ã§ã³ãå€§å¹ ã«æå¶ããããå®å šã«åãé€ãã¹ãã§ãã
@media (prefers-reduced-motion) {\n .animated-element {\n animation: none !important; /* ã¢ãã¡ãŒã·ã§ã³ãç¡å¹å */\n transform: none !important; /* transformããªã»ãã */\n opacity: 1 !important; /* å¯èŠæ§ãç¢ºä¿ */\n }\n}
ããã¯ãã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ãå«ããã¹ãŠã®ã¢ãã¡ãŒã·ã§ã³ã«å¯ŸããéèŠãªã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ã§ãã
- é床ãªåããé¿ããïŒ æå¹ã«ãªã£ãŠããå Žåã§ããæ°ãæ£ããããäžå¿«ã«ããããããå¯èœæ§ã®ãããæ¥æ¿ã§ãéãããŸãã¯å€§èŠæš¡ãªåãã¯é¿ããŠãã ããã埮åŠãªã¢ãã¡ãŒã·ã§ã³ã®æ¹ããã°ãã°å¹æçã§ãã
- å¯èªæ§ã®ç¢ºä¿ïŒ ã¢ãã¡ãŒã·ã§ã³äžãããã¹ããéèŠãªã³ã³ãã³ããèªã¿ããããŸãŸã§ããããšã確èªããŠãã ãããããã¹ããèªã¿ã«ããããããã¡ãã€ããåŒãèµ·ããããããæ¹æ³ã§ã¢ãã¡ãŒã·ã§ã³åããããšã¯é¿ããŠãã ããã
ã¬ã¹ãã³ã·ããã¶ã€ã³
ã¢ãã¡ãŒã·ã§ã³ã¯ã倧ããªãã¹ã¯ãããã¢ãã¿ãŒããå°ããªæºåž¯é»è©±ãŸã§ãããŸããŸãªããã€ã¹ã§èŠæ ããè¯ããããã©ãŒãã³ã¹ãè¯å¥œã§ããå¿ èŠããããŸããèæ ®ãã¹ãããšïŒ
- ãã¥ãŒããŒãããŒã¹ã®å€ïŒ ããŒãã¬ãŒã å
ã®å€åœ¢ãé
眮ã«ããŒã»ã³ããŒãžã
vwãvhãªã©ã®çžå¯Ÿåäœã䜿çšãããšãã¢ãã¡ãŒã·ã§ã³ãåªé ã«ã¹ã±ãŒãªã³ã°ããã®ã«åœ¹ç«ã¡ãŸãã - ã¢ãã¡ãŒã·ã§ã³ç¯å²ã®ã¡ãã£ã¢ã¯ãšãªïŒ ç»é¢ãµã€ãºã«å¿ããŠãç°ãªã
animation-rangeå€ãããŸã£ããç°ãªãã¢ãã¡ãŒã·ã§ã³ãå¿ èŠã«ãªãå ŽåããããŸããäŸãã°ãè€éãªã¹ã¯ããŒã«é§åã®ç©èªã¯ãç»é¢ã®é åãšããã©ãŒãã³ã¹ãããå¶çŽãããã¢ãã€ã«ããã€ã¹ã§ã¯ç°¡çŽ åããããããããŸããã - ããã€ã¹éã§ã®ãã¹ãïŒ åžžã«å®éã®ããã€ã¹ãŸãã¯DevToolsã®å ç¢ãªããã€ã¹ãšãã¥ã¬ãŒã·ã§ã³ã䜿çšããŠã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ããã¹ãããããã©ãŒãã³ã¹ã®ããã«ããã¯ãã¬ã€ã¢ãŠãã®åé¡ããã£ããããŠãã ããã
ããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ã
ãã©ãŠã¶ã®äºææ§ã§è¿°ã¹ãããã«ãã³ã¢ãšãªãã³ã³ãã³ããšæ©èœããããã®é«åºŠãªã¢ãã¡ãŒã·ã§ã³ã«æ±ºããŠäŸåããªãããã«ããŠãã ãããå€ããã©ãŠã¶ã®ãŠãŒã¶ãŒããåããæžããèšå®ã«ããŠãããŠãŒã¶ãŒããå®å šã§æºè¶³ã®ããäœéšãåŸãããã¹ãã§ããã¢ãã¡ãŒã·ã§ã³ã¯åŒ·åã§ãããèŠä»¶ã§ã¯ãããŸããã
ããã¯ãJavaScriptãé«åºŠãªCSSã¢ãã¡ãŒã·ã§ã³ãèªã¿èŸŒãŸããªããŠããã³ã³ãã³ããæå³çã«æ£ãããèŠèŠçã«é åçã§ããããã«HTMLãšCSSãæ§æããããšãæå³ããŸãã
ããã©ãŒãã³ã¹æé©å
ãã€ãã£ãCSSã¢ãã¡ãŒã·ã§ã³ã¯ããã©ãŒãã³ã¹ãé«ãã§ãããäžé©åãªéžæã¯äŸç¶ãšããŠåé¡ãåŒãèµ·ããå¯èœæ§ããããŸãïŒ
transformãšopacityãã¢ãã¡ãŒã·ã§ã³åããïŒ ãããã®ããããã£ã¯ãã¬ã€ã¢ãŠãããã€ã³ãäœæ¥ãåé¿ããŠã³ã³ããžã¿ã§åŠçã§ããããšãå€ããããã¢ãã¡ãŒã·ã§ã³ã«æé©ã§ããwidthãheightãmarginãpaddingãtopãleftãrightãbottomãªã©ã®ããããã£ãã¢ãã¡ãŒã·ã§ã³åããããšã¯ãé«äŸ¡ãªã¬ã€ã¢ãŠãã®åèšç®ãåŒãèµ·ããå¯èœæ§ããããããå¯èœã§ããã°é¿ããŠãã ããã- è€éãªãšãã§ã¯ããå¶éããïŒ é åçã§ãããç¹ã«è€æ°ã®èŠçŽ ã§åæã«ãããŸãã«ãå€ãã®è€éãªã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ãé©çšããããšã¯é¿ããŠãã ãããèŠèŠçãªè±ãããšããã©ãŒãã³ã¹ã®ãã©ã³ã¹ãèŠã€ããŠãã ããã
- ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã䜿çšããïŒ
transform: translateZ(0)ã®ãããªããããã£ïŒçŸä»£ã®ãã©ãŠã¶ãštransformã¢ãã¡ãŒã·ã§ã³ã§ã¯æç€ºçã«å¿ èŠãªãããšãå€ãã§ããïŒã¯ãèŠçŽ ãç¬èªã®ã³ã³ããžããã¬ã€ã€ãŒã«åŒ·å¶çã«é 眮ããããã©ãŒãã³ã¹ãããã«åäžãããã®ã«åœ¹ç«ã€ããšããããŸãã
å®äžçã®äŸãšã€ã³ã¹ãã¬ãŒã·ã§ã³
çè§£ãããã«æ·±ããæ¬¡ã®ãããžã§ã¯ãã®ã€ã³ã¹ãã¬ãŒã·ã§ã³ãåŸãããã«ãanimation-rangeã®ããã€ãã®å®äžçã®ã¢ããªã±ãŒã·ã§ã³ãæ§æ³ããŠã¿ãŸãããïŒ
- äŒæ¥ã®å¹Žæ¬¡å ±åæžïŒ ãŠãŒã¶ãŒãããã¥ã¡ã³ããã¹ã¯ããŒã«ããã«ã€ããŠã財åãã£ãŒããã¢ãã¡ãŒã·ã§ã³ã§è¡šç€ºãããäž»èŠæ¥çžŸè©äŸ¡ææšïŒKPIïŒãã«ãŠã³ãã¢ããããäŒç€Ÿã®ç¯ç®ã埮åŠãªèŠèŠçåå³ã§åŒ·èª¿è¡šç€ºãããã€ã³ã¿ã©ã¯ãã£ããªå¹Žæ¬¡å ±åæžãæ³åããŠã¿ãŠãã ãããåã»ã¯ã·ã§ã³ã«ã¯ç¬èªã®ç¹å®ã®
animation-rangeããããã¬ã€ãä»ãã®èªæžäœéšãäœãåºããŸãã - 補åã·ã§ãŒã±ãŒã¹ïŒEã³ããŒã¹ïŒïŒ æ°ããã¬ãžã§ããã®è£œå詳现ããŒãžã§ããŠãŒã¶ãŒãã¹ã¯ããŒã«ããã«ã€ããŠã¡ã€ã³ã®è£œåç»åããã£ãããšå転ãŸãã¯ãºãŒã ã€ã³ããæ©èœãå±€ããšã«æããã«ãªããŸããã¢ã¯ã»ãµãªãŒç»åã¯ããã®èª¬æã衚瀺ãããã«ã€ããŠé çªã«ãããã¢ããããŸããããã«ãããéçãªããŒãžãåçãªæ¢çŽ¢ã«å€ãããŸãã
- æè²ã³ã³ãã³ããã©ãããã©ãŒã ïŒ è€éãªç§åŠçæŠå¿µãæŽå²çãªã¿ã€ã ã©ã€ã³ã®å Žåãã¹ã¯ããŒã«é§åã¢ãã¡ãŒã·ã§ã³ã¯ããã»ã¹ã説æããããšãã§ããŸããå³ãå°ããã€æ§ç¯ãããããæŽå²å°å³ãè»éã®åããã¢ãã¡ãŒã·ã§ã³ã§ç€ºãããããããšãã§ãããã¹ãŠããŠãŒã¶ãŒã®ã¹ã¯ããŒã«æ·±åºŠã«åæãããŸããããã«ãããçè§£ãšèšæ¶ãä¿é²ãããŸãã
- ã€ãã³ããŠã§ããµã€ãïŒ ãã§ã¹ãã£ãã«ã®ãŠã§ããµã€ãã§ã¯ãã¢ãŒãã£ã¹ãã®åçãšååããã®ã»ã¯ã·ã§ã³ãç®ç«ã€ããã«ãªã£ããšãã«ã®ã¿ã¢ãã¡ãŒã·ã§ã³ã§è¡šç€ºããããã©ã€ã³ãããå ¬éããç¹éã§ããŸããã¹ã±ãžã¥ãŒã«ã»ã¯ã·ã§ã³ã§ã¯ããŠãŒã¶ãŒãéãéããã«ã€ããŠãçŸåšã®ã¿ã€ã ã¹ãããã埮åŠãªèæ¯ã®å€æŽã§åŒ·èª¿è¡šç€ºãããŸãã
- ã¢ãŒãããŒããã©ãªãªïŒ ã¢ãŒãã£ã¹ãã¯
animation-rangeã䜿çšããŠãèªèº«ã®äœåã®ããã®ãŠããŒã¯ãªã·ã§ãŒã±ãŒã¹ãäœæã§ããŸããåäœåããã®ã¹ã¿ã€ã«ã«åãããç¹æ³šã®ã¢ãã¡ãŒã·ã§ã³ã§å ¬éãããèšæ¶ã«æ®ãèžè¡çãªãã©ãŠãžã³ã°äœéšãäœãåºããŸãã
ãããã®äŸã¯ãanimation-rangeã®å€æ§æ§ãšè¡šçŸåãæµ®ã圫ãã«ããŸããã¹ã¯ããŒã«ãã©ã®ããã«ç©èªãé§åããã³ã³ãã³ããæããã«ã§ããããåµé çã«èããããšã§ãéçºè
ã¯æ··éãããªã³ã©ã€ã³ã®é¢šæ¯ã®äžã§éç«ã€ãçã«ãŠããŒã¯ã§é
åçãªããžã¿ã«äœéšãäœãåºãããšãã§ããŸãã
çµè«
CSS Animation Rangeã¯ãanimation-timelineãšå
±ã«ããã€ãã£ããªWebã¢ãã¡ãŒã·ã§ã³æ©èœã«ããã倧ããªé£èºã衚ããŠããŸããããã¯ãããã³ããšã³ãéçºè
ã«ã¹ã¯ããŒã«é§åãšãã§ã¯ãã«å¯ŸããåäŸã®ãªãã¬ãã«ã®å®£èšçå¶åŸ¡ãæäŸããæŽç·Žãããã€ã³ã¿ã©ã¯ã·ã§ã³ãè€éãªJavaScriptã©ã€ãã©ãªã®é åãããããããã©ãŒãã³ã¹ãé«ãä¿å®ããããçŽç²ãªCSSã®é åãžãšç§»è¡ãããŸãã
ã¹ã¯ããŒã«ã¿ã€ã ã©ã€ã³äžã§ã¢ãã¡ãŒã·ã§ã³ã®éå§ç¹ãšçµäºç¹ãæ£ç¢ºã«å®çŸ©ããããšã§ãæ¯ãã®ããããªãã©ã©ãã¯ã¹å¹æãé åçãªã³ã³ãã³ãã®è¡šç€ºãåçãªããã°ã¬ã¹ã€ã³ãžã±ãŒã¿ãŒããããŠè€éãªå€æ®µéã®ç©èªãç·šæã§ããŸããããã©ãŒãã³ã¹äžã®å©ç¹ãšãCSSãã€ãã£ããœãªã¥ãŒã·ã§ã³ã®ãšã¬ã¬ã³ã¹ãçµã¿åãããããšã§ãããã¯ããããéçºè ã®ããŒã«ãããã«åŒ·åãªè¿œå ãšãªããŸãã
ãã©ãŠã¶ã®ãµããŒãã¯ãŸã çµ±åäžã§ãããããã°ã¬ãã·ããšã³ãã³ã¹ã¡ã³ãæŠç¥ã«ããã仿¥ãããããã®æ©èœã詊ããå®è£ ãå§ããããšãã§ããŸããçŸä»£ã®ãã©ãŠã¶ã®ãŠãŒã¶ãŒã«ã¯æå 端ã®äœéšãæäŸããä»ã®ãŠãŒã¶ãŒã«ã¯åªé ã«ãã©ãŒã«ããã¯ããŸãã
Webã¯åžžã«é²åãããã£ã³ãã¹ã§ããCSS Animation Rangeãåãå ¥ããŠãããæŽ»æ°ã«æºã¡ãã€ã³ã¿ã©ã¯ãã£ãã§ãããã©ãŒãã³ã¹ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæããŸããããå®éšãå§ããçŽ æŽããããã®ãæ§ç¯ãããã¹ãŠã®äººã«ãšã£ãŠãããã€ãããã¯ã§é åçãªããžã¿ã«ã¯ãŒã«ãã«è²¢ç®ããŠãã ããã