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
520
ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ
grgr-dkrk
January 29, 2020
Tweet
Share
More Decks by grgr-dkrk
See All by grgr-dkrk
Alternative to Storybook を探す旅
grgrdkrk
3
2.8k
VoiceOverの自動テスト
grgrdkrk
2
420
React Native のアプリでスクリーンリーダーを使ってみる
grgrdkrk
0
160
React Native と アクセシビリティ
grgrdkrk
2
870
DTx と アクセシビリティ
grgrdkrk
0
99
Accessibility Tree と Accessibility Object Model
grgrdkrk
0
710
Blazor-Fluxor と Redux(仮)
grgrdkrk
0
68
Other Decks in Programming
See All in Programming
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.1k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
15
2k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
800
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
Goで作る、開発・CI環境
sin392
0
260
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Agile that works and the tools we love
rasmusluckow
329
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Automating Front-end Workflow
addyosmani
1370
200k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Six Lessons from altMBA
skipperchong
28
3.9k
Visualization
eitanlees
146
16k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Cult of Friendly URLs
andyhume
79
6.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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