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
440
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgr-dkrk
January 29, 2020
Tweet
Share
More Decks by grgr-dkrk
See All by grgr-dkrk
Alternative to Storybook を探す旅
grgrdkrk
3
2.3k
VoiceOverの自動テスト
grgrdkrk
2
350
React Native のアプリでスクリーンリーダーを使ってみる
grgrdkrk
0
130
React Native と アクセシビリティ
grgrdkrk
2
780
DTx と アクセシビリティ
grgrdkrk
0
75
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
630
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
58
Other Decks in Programming
See All in Programming
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
1.9k
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
290
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
イベント駆動で成長して委員会
happymana
1
320
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
Contemporary Test Cases
maaretp
0
140
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
Remix on Hono on Cloudflare Workers
yusukebe
1
290
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
880
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
920
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
57k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Code Review Best Practice
trishagee
64
17k
Statistics for Hackers
jakevdp
796
220k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
A better future with KSS
kneath
238
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
For a Future-Friendly Web
brad_frost
175
9.4k
Making Projects Easy
brettharned
115
5.9k
Building Applications with DynamoDB
mza
90
6.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
96
The Pragmatic Product Professional
lauravandoore
31
6.3k
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