ちょっとマイナーなケースから学ぶ CSS のアニメーションのいいところ

Transcript

1. ͪΐͬͱϚΠφʔͳέʔε͔ΒֶͿ
   $44ͷΞχϝʔγϣϯͷ͍͍ͱ͜Ζ
   8FE
   
   .FHVSPDTT
   HSHSELSL
   

   View Slide

2. ࣗݾ঺հ
   HSHSELSL !ELSL
   
   גࣜձࣾ$VSF"QQॴଐ
   3FBDU/BUJWF5ZQF4DSJQU
   

   View Slide

3. $445SBOTJUJPOͱ$44"OJNBUJPO
   ·ͱΊͯ$44ͷΞχϝʔγϣϯ
   
   ͍͍ΑͶͱ͍͏࿩
   ˞47(΋͍͍͚Ͳ৮Ε·ͤΜ
   

   View Slide

4. $44ͷΞχϝʔγϣϯ
   એݴత
   ໨త஍͕ܾ·ͬͯΔ
   

   View Slide

5. $44ͷΞχϝʔγϣϯ
   ͦ͜·ͰΛิؒ
   ໨త஍
   ݩͷ৔ॴ USBOTJUJPO
   ·ͨ͸LFZGSBNFT
   

   View Slide

6. +BWB4DSJQUͷΞχϝʔγϣϯ
   SFRVFTU"OJNBUJPO'SBNFͳͲɺϑϨʔϜ୯Ґ
   λΠϜελϯϓͷࠩ෼ͰਐߦΛܭࢉ
   ໨త஍
   ݩͷ৔ॴ
   Ҡಈ
   Ҡಈ
   Ҡಈ
   ʜ
   ⏰
   

   View Slide

7. Ξχϝʔγϣϯ༻ͷΤϯδϯ ࡶ
   
   .BJO5ISFBE $PNQPTJUPS
   "OJNBUJPO
   &OHJOF Ծ໊
   
   5SBOTGPSN
   0QBDJUZͳͲ
   

   View Slide

8. "OJNBUJPOΠϯεϖΫλʔ
   

   View Slide

9. IUUQTDPOGFSFODFQJYJWDPKQUFDIGFTͰ
   ΠϯεϖΫλʔΛ࢖༻
   ఀࢭɺഒ଎ɺר͖໭͠ͱ͔Ͱ͖Δ
   

   View Slide

10. $44ϕʔεͷ
    +BWB4DSJQUΞχϝʔγϣϯ΋
    ͋Δ
    

    View Slide

11. 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',
    }
    )
    

    View Slide

12. 8FC"OJNBUJPOT"1* 8""1*
    
    $44ͱಉ͡ͱ͜ΖͰಈ͔ͤΔ
    

    View Slide

13. ϑϨʔϜϫʔΫ ϥΠϒϥϦͷ
    5SBOTJUJPO
    "OHVMBSͷUSBOTJUJPO
    7VFKTͷUSBOTJUJPO
    4WFMUFͷBOJNBUF
    3FBDUͷ5SBOTJUJPO(SPVQ
    
    ·ͨ͸VTF5SBOTJUJPO FYQFSJNFOUBM
    $44
    

    View Slide

14. )PVEJOJ5BTL'PSDF
    8FC8PSLFST
    $44"OJNBUJPO8PSLMFU"1* ·ͩ
    
    IUUQTXXXXPSH53DTTBOJNBUJPOXPSLMFU
    

    View Slide

15. $44ͱϑϨʔϜ୯Ґͷ
    Ξχϝʔγϣϯͷҧ͍
    

    View Slide

16. ύϑΥʔϚϯε
    ֤ॴͰطʹٞ࿦͞Ε͍ͯΔͷͰলུ
    

    View Slide

17. ηΩϡϦςΟɺϓϥΠόγʔ
    $445SBOTJUJPO΍$44"OJNBUJPOʹ͸ͳ͍ʁ
    8""1*͸ͦ΋ͦ΋ॻ͍ͯͳ͍
    

    View Slide

18. IUUQTXXXXPSH53ISUJNFTFDQSJWBDZTFDVSJUZ
    %0.)JHI3FT5JNF4UBNQ
    ηΩϡϦςΟɺϓϥΠόγʔ
    ࣌ؒਫ਼౓ͰύϑΥʔϚϯε৘ใ͕
    ౪ΈऔΒΕΔ͔΋ʁ
    

    View Slide

19. ϒϥ΢β͕ൿಗੑͷߴ͍ڍಈΛٻΊΔ࣌
    Ξχϝʔγϣϯ͕λΠϜελϯϓʹґଘ͢Δͱ
    มͳݱ৅͕ى͜Δ
    

    View Slide

20. QSJWBDZSFTJTU'JOHFSQSJOUJOH
    IUUQTXJLJNP[JMMBPSH4FDVSJUZ'JOHFSQSJOUJOH
    

    View Slide

21. ˞'JOHFS1SJOUJOH
    ϖʔδ্Ͱ୺຤৘ใ΍ඳը݁ՌΛऔಘͯ͠ɺ
    ϢʔβʔΛಛఆͰ͖Δϋογϡ஋Λੜ੒͢Δ
    τϥοΩϯάٕज़
    

    View Slide

22. QSJWBDZSFTJTU'JOHFSQSJOUJOH
    'JOHFSQSJOUJOHʹѱ༻͞ΕΔॲཧΛ੍ݶ
    5PS#SPXTFSͷػೳ
    'JSFGPYͰ΋ઃఆՄ
    5PSϩΰ
    

    View Slide

23. SFTJTU'JOHFSQSJOUJOH͕΍Δ͜ͱ
    w $BOWBTͷඳը݁Ռͷग़ྗΛ཈੍
    w ϩέʔϧͷݻఆ
    w 1FSGPSNBODF"1*ͷػೳΛ΄ͱΜͲແޮԽ
    w ࣌ؒਫ਼౓ͷ௿Լ NTʙ
    
    

    View Slide

24. NTʙ
    Ξχϝʔγϣϯͷཧ૝
    T˺NTΛ্ճΔ
    +VOLͬΆ͍ಈ͖ʹͳΔ
    

    View Slide

25. ௨ৗ SFTJTUpOHFSQSJOUJOH
    

    View Slide

26. 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)
    }
    

    View Slide

27. ໰୊ͱͳΔ΋ͷ
    w %BUFOPX
    w QFSGPSNBODFOPX
    w SFRVFTU"OJNBUJPO'SBNFͷDBMMCBDLͷҾ਺
    ͕ର৅ ࢖ͬͯͳ͍ͳΒ໰୊ͳ͍
    
    

    View Slide

28. ࢖ͬͯΔ΍ͭ
    w K2VFSZͷBOJNBUF
    w 7FMPDJUZ
    w 5XFFO.BY
    w %KT
    ͳͲ
    

    View Slide

29. ͱ͸ݴͬͯ΋
    $44ϕʔεͰ͸೉͍͠ॲཧ͸͋Δ
    $44Ҏ֎ͷϓϩύςΟ΍
    ςΩετͷૢ࡞ͳͲ
    

    View Slide

30. 8FC"OJNBUJPOT-FWFM̎
    IUUQTESBGUTDTTXHPSHXFCBOJNBUJPOTDVTUPNFGGFDU
    $VTUPN&GGFDU
    Ͱ$44Ҏ֎ͷϑΟʔϧυͰ΋ઓ͑ͦ͏ʁ
    ͨͩ͠6OPGpDJBM%SBGU
    

    View Slide

31. ࡶ·ͱΊ
    มͳͷʹґଘ͠ͳ͍$44͕ྑ͍
    ˞ϢʔεέʔεʹԠͯ͡ແཧͷͳ͍ΞχϝʔγϣϯΛ
    

    View Slide

32. ͱ͜ΖͰ
    ٯʹΞχϝʔγϣϯͤͨ͘͞ͳ͍৔߹΋͋Δ
    ͦΜͳ࣌Ͱ΋$44͸ڧ͍
    

    View Slide

33. SFEVDFENPUJPO
    ಈ͖ͷ͋ΔදݱͰൃ࡞Λىͯ͜͠͠·͏ͱ͔ɺ
    Ξχϝʔγϣϯ0''ͰαΫαΫಈ͔͍ͨ͠ͱ͔
    धཁʹԠ͑Δ
    

    View Slide

34. ͜Ε
    NBDͷʮ؀ڥઃఆʯ
    

    View Slide

35. $44ͳΒऴண఺͕ܾ·ͬͯΔ
    ͦͷաఔΛม͑Δ͚ͩ
    

    View Slide

36. QSFGFSTSFEVDFENPUJPO
    .FEJB2VFSZ-FWFM
    
    CPPUTUSBQ BOJNBUFDTTͳͲ͕࠾༻
    *& چ&EHFະରԠ
    @media (prefers-reduced-motion: reduce) {
    * {
    animation-duration: 0.01s !important;
    transition-duration: 0.01s !important;
    }
    }
    

    View Slide

37. UIJTJTΞΫηγϒϧʂʂ
    @media (prefers-reduced-motion: reduce) {
    * {
    animation-duration: 0.01s !important;
    transition-duration: 0.01s !important;
    }
    }
    

    View Slide

38. +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
    }
    

    View Slide

39. 5SBOTJUPOऴΘ͔ͬͨΒ
    ൃՐ͢ΔΑ
    5SBOTJUJPOऴΘ͚ͬͨͲ
    %VSBUJPO͕·ͩʜ
    ϑϨʔϜϫʔΫɺϥΠϒϥϦͷ
    5SBOTJUJPOͩͱʜ
    

    View Slide

40. 5SBOTJUJPO͕ऴΘ͕ͬͨɺ%VSBUJPO͕ऴΘͬͯͳ͍
    ࿈ܞͰ͖ͯͳ͍৔߹
    

    View Slide

41. ͦͯ͠$44΋஫ҙ
    AOPOFA͸ආ͚Δɻ
    ABOJNBUJPOpMMNPEFAͷTUZMFอ࣋΍ɺ
    &WFOUͷൃՐͳͲͷͨΊ
    animation: none !important; // ͭΒ͍
    animation-duration: 0.01ms !important; // ͜͏
    

    View Slide

42. ࡶ·ͱΊ
    Ξχϝʔγϣϯඈ͹͢ͷָ
    QSFGFSTSFEVDFENPUJPOͷऔΓѻ͍͸ਏ͍
    

    View Slide

43. ײ૝
    มͳ෭࡞༻ʹ೰·͞Εͳ͍Α
    աఔΛ͍͡Δͷ΋ָͩΑ
    $44ͰΞχϝʔγϣϯɺྑ͍Α
    

    View Slide

44. ͔͠͠
    @media (prefers-reduced-motion: reduce) {
    * {
    animation-duration: 0.01s !important;
    transition-duration: 0.01s !important;
    }
    }
    ͜ΕɺϓϥΠόγʔʹ
    ؔΘΔઃఆͰ͸ʁ
    

    View Slide

45. IUUQTXXXXPSH53DTTUSBOTJUJPOT
    ʮࢹࠩޮՌΛܰݮ͢Δʯ
    ͷΑ͏ͳઃఆΛ8FCίϯςϯπ͔ΒӅ͔͢
    ܰݮΛड͚ೖΕΔ͔ͷτϨʔυΦϑΛഭΒΕ͍ͯΔ
    

    View Slide

46. QSJWBDZSFTJTU'JOHFSQSJOUJOH͕USVFͩͱ
    QSFGFSTSFEVDFENPUJPO͕ແࢹ͞ΕΔ
    

    View Slide

47. $44Ͱ΋
    ༉அͰ͖ͳ͔ͬͨ
    

    View Slide

48. View Slide