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
510
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgr-dkrk
January 29, 2020
Tweet
Share
More Decks by grgr-dkrk
See All by grgr-dkrk
Alternative to Storybook を探す旅
grgrdkrk
3
2.7k
VoiceOverの自動テスト
grgrdkrk
2
410
React Native のアプリでスクリーンリーダーを使ってみる
grgrdkrk
0
150
React Native と アクセシビリティ
grgrdkrk
2
860
DTx と アクセシビリティ
grgrdkrk
0
94
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
700
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
63
Other Decks in Programming
See All in Programming
Rethinking Data Access: The New httpResource in Angular
manfredsteyer
PRO
0
220
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
280
型安全なDrag and Dropの設計を考える
yudppp
5
660
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
Passkeys for Java Developers
ynojima
1
260
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
7
380
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
480
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
670
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
150
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
71
4.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
KATA
mclloyd
29
14k
Designing for Performance
lara
608
69k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
82
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
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