ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ

ͪΐͬͱϚΠφʔͳέʔε͔ΒֶͿ $44ͷΞχϝʔγϣϯͷ͍͍ͱ͜Ζ 8FE .FHVSPDTT HSHSELSL

ࣗݾ঺հ HSHSELSL !ELSL גࣜձࣾ$VSF"QQॴଐ 3FBDU/BUJWF5ZQF4DSJQU

$445SBOTJUJPOͱ$44"OJNBUJPO ·ͱΊͯ$44ͷΞχϝʔγϣϯ ͍͍ΑͶͱ͍͏࿩ ˞47(΋͍͍͚Ͳ৮Ε·ͤΜ

$44ͷΞχϝʔγϣϯ એݴత ໨త஍͕ܾ·ͬͯΔ

$44ͷΞχϝʔγϣϯ ͦ͜·ͰΛิؒ ໨త஍ ݩͷ৔ॴ USBOTJUJPO ·ͨ͸LFZGSBNFT

+BWB4DSJQUͷΞχϝʔγϣϯ SFRVFTU"OJNBUJPO'SBNFͳͲɺϑϨʔϜ୯Ґ λΠϜελϯϓͷࠩ෼ͰਐߦΛܭࢉ ໨త஍ ݩͷ৔ॴ Ҡಈ Ҡಈ Ҡಈ ʜ ⏰

Ξχϝʔγϣϯ༻ͷΤϯδϯ ࡶ .BJO5ISFBE $PNQPTJUPS "OJNBUJPO &OHJOF Ծ໊ 5SBOTGPSN 0QBDJUZͳͲ

"OJNBUJPOΠϯεϖΫλʔ

IUUQTDPOGFSFODFQJYJWDPKQUFDIGFTͰ ΠϯεϖΫλʔΛ࢖༻ ఀࢭɺഒ଎ɺר͖໭͠ͱ͔Ͱ͖Δ

$44ϕʔεͷ +BWB4DSJQUΞχϝʔγϣϯ΋ ͋Δ

8FC"OJNBUJPOT"1* 8""1* $44"OJNBUJPOͷಛੑΛ࣋ͭ Elm.animate( [ { transform: `translate3d(0, 0, 0)
scale(1)`, }, { transform: `translate3d(500px, 0, 0) scale(4)`, }, ], { duration: setDuration(DURATION), fill: 'both', } )

8FC"OJNBUJPOT"1* 8""1* $44ͱಉ͡ͱ͜ΖͰಈ͔ͤΔ

ϑϨʔϜϫʔΫ ϥΠϒϥϦͷ 5SBOTJUJPO "OHVMBSͷUSBOTJUJPO 7VFKTͷUSBOTJUJPO 4WFMUFͷBOJNBUF 3FBDUͷ5SBOTJUJPO(SPVQ ·ͨ͸VTF5SBOTJUJPO FYQFSJNFOUBM
$44

)PVEJOJ5BTL'PSDF 8FC8PSLFST $44"OJNBUJPO8PSLMFU"1* ·ͩ IUUQTXXXXPSH53DTTBOJNBUJPOXPSLMFU

$44ͱϑϨʔϜ୯Ґͷ Ξχϝʔγϣϯͷҧ͍

ύϑΥʔϚϯε ֤ॴͰطʹٞ࿦͞Ε͍ͯΔͷͰলུ

ηΩϡϦςΟɺϓϥΠόγʔ $445SBOTJUJPO΍$44"OJNBUJPOʹ͸ͳ͍ʁ 8""1*͸ͦ΋ͦ΋ॻ͍ͯͳ͍

IUUQTXXXXPSH53ISUJNFTFDQSJWBDZTFDVSJUZ %0.)JHI3FT5JNF4UBNQ ηΩϡϦςΟɺϓϥΠόγʔ ࣌ؒਫ਼౓ͰύϑΥʔϚϯε৘ใ͕ ౪ΈऔΒΕΔ͔΋ʁ

ϒϥ΢β͕ൿಗੑͷߴ͍ڍಈΛٻΊΔ࣌ Ξχϝʔγϣϯ͕λΠϜελϯϓʹґଘ͢Δͱ มͳݱ৅͕ى͜Δ

QSJWBDZSFTJTU'JOHFSQSJOUJOH IUUQTXJLJNP[JMMBPSH4FDVSJUZ'JOHFSQSJOUJOH

˞'JOHFS1SJOUJOH ϖʔδ্Ͱ୺຤৘ใ΍ඳը݁ՌΛऔಘͯ͠ɺ ϢʔβʔΛಛఆͰ͖Δϋογϡ஋Λੜ੒͢Δ τϥοΩϯάٕज़

QSJWBDZSFTJTU'JOHFSQSJOUJOH 'JOHFSQSJOUJOHʹѱ༻͞ΕΔॲཧΛ੍ݶ 5PS#SPXTFSͷػೳ 'JSFGPYͰ΋ઃఆՄ 5PSϩΰ

SFTJTU'JOHFSQSJOUJOH͕΍Δ͜ͱ w $BOWBTͷඳը݁Ռͷग़ྗΛ཈੍ w ϩέʔϧͷݻఆ w 1FSGPSNBODF"1*ͷػೳΛ΄ͱΜͲແޮԽ w ࣌ؒਫ਼౓ͷ௿Լ NTʙ

NTʙ Ξχϝʔγϣϯͷཧ૝ T˺NTΛ্ճΔ +VOLͬΆ͍ಈ͖ʹͳΔ

௨ৗ SFTJTUpOHFSQSJOUJOH

function resistFingerprintingTsurai() { let start = null const step =
now => { if (!start) start = now const passedTime = now - start TargetElm.style.transform = `translate3d(0, ${passedTime}px, 0)` if (passedTime <= TIME_END_ANIMATION) { window.requestAnimationFrame(step) } } window.requestAnimationFrame(step) }

໰୊ͱͳΔ΋ͷ w %BUFOPX w QFSGPSNBODFOPX w SFRVFTU"OJNBUJPO'SBNFͷDBMMCBDLͷҾ਺ ͕ର৅ ࢖ͬͯͳ͍ͳΒ໰୊ͳ͍

࢖ͬͯΔ΍ͭ w K2VFSZͷBOJNBUF w 7FMPDJUZ w 5XFFO.BY w %KT ͳͲ

ͱ͸ݴͬͯ΋ $44ϕʔεͰ͸೉͍͠ॲཧ͸͋Δ $44Ҏ֎ͷϓϩύςΟ΍ ςΩετͷૢ࡞ͳͲ

8FC"OJNBUJPOT-FWFM̎ IUUQTESBGUTDTTXHPSHXFCBOJNBUJPOTDVTUPNFGGFDU $VTUPN&GGFDU Ͱ$44Ҏ֎ͷϑΟʔϧυͰ΋ઓ͑ͦ͏ʁ ͨͩ͠6OPGpDJBM%SBGU

ࡶ·ͱΊ มͳͷʹґଘ͠ͳ͍$44͕ྑ͍ ˞ϢʔεέʔεʹԠͯ͡ແཧͷͳ͍ΞχϝʔγϣϯΛ

ͱ͜ΖͰ ٯʹΞχϝʔγϣϯͤͨ͘͞ͳ͍৔߹΋͋Δ ͦΜͳ࣌Ͱ΋$44͸ڧ͍

SFEVDFENPUJPO ಈ͖ͷ͋ΔදݱͰൃ࡞Λىͯ͜͠͠·͏ͱ͔ɺ Ξχϝʔγϣϯ0''ͰαΫαΫಈ͔͍ͨ͠ͱ͔ धཁʹԠ͑Δ

͜Ε NBDͷʮ؀ڥઃఆʯ

$44ͳΒऴண఺͕ܾ·ͬͯΔ ͦͷաఔΛม͑Δ͚ͩ

QSFGFSTSFEVDFENPUJPO .FEJB2VFSZ-FWFM CPPUTUSBQ BOJNBUFDTTͳͲ͕࠾༻ *& چ&EHFະରԠ @media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01s !important; transition-duration: 0.01s !important; } }

UIJTJTΞΫηγϒϧʂʂ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important;
transition-duration: 0.01s !important; } }

+BWB4DSJQUͩͱʜ EVSBUJPOΛஔ͖׵͑Δඞཁ͕͋Δɻ 8""1*΋ಉ͡ export const hasPrefersReducedMotion = typeof window !==
undefined && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)’).matches export function setDuration(duration: number) { return hasPrefersReducedMotion ? 10 : duration }

5SBOTJUPOऴΘ͔ͬͨΒ ൃՐ͢ΔΑ 5SBOTJUJPOऴΘ͚ͬͨͲ %VSBUJPO͕·ͩʜ ϑϨʔϜϫʔΫɺϥΠϒϥϦͷ 5SBOTJUJPOͩͱʜ

5SBOTJUJPO͕ऴΘ͕ͬͨɺ%VSBUJPO͕ऴΘͬͯͳ͍ ࿈ܞͰ͖ͯͳ͍৔߹

ͦͯ͠$44΋஫ҙ AOPOFA͸ආ͚Δɻ ABOJNBUJPOpMMNPEFAͷTUZMFอ࣋΍ɺ &WFOUͷൃՐͳͲͷͨΊ animation: none !important; // ͭΒ͍ animation-duration:
0.01ms !important; // ͜͏

ࡶ·ͱΊ Ξχϝʔγϣϯඈ͹͢ͷָ QSFGFSTSFEVDFENPUJPOͷऔΓѻ͍͸ਏ͍

ײ૝ มͳ෭࡞༻ʹ೰·͞Εͳ͍Α աఔΛ͍͡Δͷ΋ָͩΑ $44ͰΞχϝʔγϣϯɺྑ͍Α

͔͠͠ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important;
transition-duration: 0.01s !important; } } ͜ΕɺϓϥΠόγʔʹ ؔΘΔઃఆͰ͸ʁ

IUUQTXXXXPSH53DTTUSBOTJUJPOT ʮࢹࠩޮՌΛܰݮ͢Δʯ ͷΑ͏ͳઃఆΛ8FCίϯςϯπ͔ΒӅ͔͢ ܰݮΛड͚ೖΕΔ͔ͷτϨʔυΦϑΛഭΒΕ͍ͯΔ

QSJWBDZSFTJTU'JOHFSQSJOUJOH͕USVFͩͱ QSFGFSTSFEVDFENPUJPO͕ແࢹ͞ΕΔ

$44Ͱ΋ ༉அͰ͖ͳ͔ͬͨ

ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ

ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ

More Decks by grgr-dkrk

Other Decks in Programming

Featured

Transcript