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. 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', } )
  2. 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) }
  3. +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 }
  4. ͔͠͠ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important;

    transition-duration: 0.01s !important; } } ͜ΕɺϓϥΠόγʔʹ ؔΘΔઃఆͰ͸ʁ