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
490
ちょっとマイナーなケースから学ぶ 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
400
React Native のアプリでスクリーンリーダーを使ってみる
grgrdkrk
0
140
React Native と アクセシビリティ
grgrdkrk
2
840
DTx と アクセシビリティ
grgrdkrk
0
89
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
680
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
63
Other Decks in Programming
See All in Programming
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
1.3k
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
740
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
12
4k
Do Dumb Things
mitsuhiko
0
370
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
18
4.1k
WordPress Playground for Developers
iambherulal
0
120
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
510
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
890
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
140
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
160
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.6k
Productivity is Messing Around and Having Fun
hollycummins
0
170
Featured
See All Featured
Designing for Performance
lara
606
69k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Bash Introduction
62gerente
611
210k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
KATA
mclloyd
29
14k
4 Signs Your Business is Dying
shpigford
183
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
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