Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

grgr-dkrk
January 29, 2020

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

grgr-dkrk

January 29, 2020
Tweet

More Decks by grgr-dkrk

Other Decks in Programming

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