Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
Search
grgr-dkrk
January 29, 2020
Programming
0
480
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgr-dkrk
January 29, 2020
Tweet
Share
More Decks by grgr-dkrk
See All by grgr-dkrk
Alternative to Storybook を探す旅
grgrdkrk
3
2.6k
VoiceOverの自動テスト
grgrdkrk
2
390
React Native のアプリでスクリーンリーダーを使ってみる
grgrdkrk
0
140
React Native と アクセシビリティ
grgrdkrk
2
820
DTx と アクセシビリティ
grgrdkrk
0
83
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
660
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
61
Other Decks in Programming
See All in Programming
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.3k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
Learning Kotlin with detekt
inouehi
1
120
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
Better Code Design in PHP
afilina
0
170
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
190
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Site-Speed That Sticks
csswizardry
4
410
Being A Developer After 40
akosma
89
590k
The Cult of Friendly URLs
andyhume
78
6.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Typedesign – Prime Four
hannesfritz
40
2.5k
How GitHub (no longer) Works
holman
314
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Transcript
ͪΐͬͱϚΠφʔͳέʔε͔ΒֶͿ $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Ͱ ༉அͰ͖ͳ͔ͬͨ
None