綾なす CSS アニメーション

グランフロント大阪にて開催された FRONTEND CONFERENCE 2018 での登壇資料。

Transcript

1. ҁͳ͢
   $44
   Ξχϝʔγϣϯ '30/5&/%
   $0/'&3&/$&
   
   
   4BU
   (3"/%
   '30/5
   04","
2. ෱ᆹ
   ୎࠸ ɾϑϩϯτΤϯυΤϯδχΞ
   
   ೥໨
   ɾࢢ಺ͷ
   8FC
   ੍࡞ձࣾʹۈ຿
   ɾ$44
   ͕޷͖
   
   ಘҙ
   ɾTUZMFMJOU
   ਪ͠
   ɾͨ·ʹ
   044
   ׆ಈ
3. $44
   Ξχϝʔγϣϯͷྑ͞ ɾ͙͢ࢼͤΔʢϒϥ΢β͑͋͞Ε͹ʂʣ ɾ͵Δ͵Δಈ͘ ɾ+BWB4DSJQU
   Λॻ͔ͳͯ͘΋͍͍
4. ͳͥΞχϝʔγϣϯͤ͞Δͷ͔ ɾೝ஌༰қੑΛߴΊΔʢঢ়ଶͷมԽΛࢹ֮Խ͢Δʣ ɾ஫ҙΛҾ͘ ɾಛ௃΍ੑ֨Λදݱ͢ΔʢϒϥϯσΟϯάʣ ɾ໘ന͞ΛՃ͑Δ
5. ͳͥΞχϝʔγϣϯͤ͞Δͷ͔ ɾೝ஌༰қੑΛߴΊΔ ɾ஫ҙΛҾ͘ ɾಛ௃΍ੑ֨Λදݱ͢Δ ɾ໘ന͞ΛՃ͑Δ ʩ ʩ ػೳ ҹ৅
6. ͳͥΞχϝʔγϣϯͤ͞Δͷ͔ ɾೝ஌༰қੑΛߴΊΔ ɾ஫ҙΛҾ͘ ɾಛ௃΍ੑ֨Λදݱ͢Δ ɾ໘ന͞ΛՃ͑Δ ʩ ʩ ػೳ
   ˡ
   ͕ͬͪ͜ઌ ҹ৅
7. ஫ҙ͢΂͖͜ͱ ʮػೳʯͱͯ͠ͷΞχϝʔγϣϯʹ͓͍ͯ͸ ɾͲ͜ʹ஫໨͍͔ͤͨ͞ʢ༨ܭͳಈ͖͸࡟Δʣ ɾετʔϦʔੑΛ΋ͨͤΔʢ༧ଌΛཪ੾Βͳ͍ʣ ɾґଘ͠ͳ͍ʢීวੑͷ͋ΔσβΠϯʣ
8. ஫ҙ͢΂͖͜ͱ ʮҹ৅ʯͱͯ͠ͷΞχϝʔγϣϯʹ͓͍ͯ͸ ɾ؆ܿʹʢ௕͘ͱ΋
   
   ඵ
   d
   
   ඵʣ ɾ৘ใΛӅ͞ͳ͍ʢॳΊ͔Βݟ͑ΔΑ͏ʹʣ ɾݟΔ͜ͱΛڧ੍͠ͳ͍ʢεΩοϓͰ͖ΔΑ͏ʹʣ
9. ͍ͪ͹ΜΧϯλϯͳΞχϝʔγϣϯ transition: opacity 0.3s ease 1s; ɾΞχϝʔγϣϯ͍ͤͨ͞ϓϩύςΟ ɾ௕͞ʢ୯Ґ͸
   T
   ͔
   NTʣ ɾΠʔδϯάؔ਺ ɾ஗Ԇͷ௕͞ʢ୯Ґ͸
   T
   ͔
   NTʣ
10. ΞχϝʔγϣϯՄೳͳϓϩύςΟ "OJNBUBCMF
    $44
    QSPQFSUJFT
    IUUQTEFWFMPQFSNP[JMMBPSHFO64EPDT8FC$44 $44@BOJNBUFE@QSPQFSUJFT Ґஔɺେ͖͞ɺճసɺෆಁ໌౓౳ɺ͍͍ͩͨಈ͔ͤΔ
11. Ξχϝʔγϣϯʹ޲͘ϓϩύςΟ ͜ͷ
    
    ͚ͭͩ͸ϒϥ΢βʹΑͬͯࣗಈతʹ
    νϡʔχϯά͞ΕΔ ɾUSBOTGPSN ɾPQBDJUZ
12. XJMMDIBOHF
    ϓϩύςΟ ΄΅࢖Θͳ͍͍ͯ͘ʢΑ͘ཧղ͍ͯ͠ͳ͍ݶΓʣ
13. ΞχϝʔγϣϯͷࠜװʮΠʔδϯάʯ ɾՃ଎౓Λද͢΋ͷɺ؇ٸΛ͚ͭΔ΋ͷ ɾʮॳಈ͸͢͹΍͘ɺऴΘΓ͸Ώͬ͘Γʯ౳ ɾͦͷΞχϝʔγϣϯͷҹ৅Λେ͖͘ࠨӈ͢Δʮද৘ʯ ɾΠʔδϯάؔ਺ʹΑͬͯࢦఆ͢Δ
14. Πʔδϯάͷछྨ ɾFBTFJO
    ࢝Ί͸Ώͬ͘ΓɺऴΘΓ͸ૉૣ͘ ɾFBTFPVU
    ࢝Ί͸ૉૣ͘ɺऴΘΓ͸Ώͬ͘Γ ɾFBTFJOPVU
    ࢝ΊͱऴΘΓ͸Ώͬ͘Γɺதؒ͸ૉૣ͘
15. Πʔδϯάͷԫۚύλʔϯ &BTJOH
    'VODUJPO
    ૣݟද
    IUUQTFBTJOHTOFUKB "OESFZ
    4JUOJL
    ࢯ࡞ʢ1PTU$44ɺ"VUPQSFpYFS
    ͷ࡞ऀʣ
16. Ξχϝʔγϣϯͷֶͼํ ɾ.BUFSJBM
    %FTJHO
    ͳͲɺମܥཱͯΒΕͨ
    ɹϑϨʔϜϫʔΫͷࢥ૝ΛਅࣅͯΈΔ ɾΪϟϥϦʔαΠτ౳͔ΒؾʹͳΔ΋ͷΛݟ͚ͭͯ
    ɹ໛ࣸͯ͠ΈΔ