Adobe XDやろうぜ！すぐ使えるWebデザイン Tips / xd-webdesign-tips

2019.01.31に放送されたAdobe CC道場のスライドです。
#247 Adobe XDやろうぜ！すぐ使えるWebデザイン Tips – 松下絵梨
https://blogs.adobe.com/japan/cc-ccdojo-247-xd-dreamweaver-web-design/

参考）XDのイージング比較
http://bit.ly/xd_easing

Transcript

1. "EPCF
   9%΍Ζ͏ͥ ʂ ͙͢࢖͑Δ8FCσβΠϯ
   5JQT দԼ
   ֆས
2. ·ͭͨ͠
   ͑Γ 8FC%51σβΠφʔ
   
   σδλϧϋϦ΢ουେࡕߍ
   ओװߨࢣ
   ίϯϐϡʔλઐ໳ֶߍ)"-
   ඇৗۈߨࢣ
   $44
   /JUF
   JO
   0TBLB
   ࣮ߦҕһ௕
   9%Ϣʔβʔάϧʔϓ ʮେࡕ
   9%
   NFFUJOHʯओ࠻ দԼ
   ֆས matsu_eri
3. େࡕ
   9%
   .FFUJOH
4. fb.com/groups/xdstudy.osaka/
5. Osaka XD Meeting
7. ࠓ೔ͷྲྀΕ
8. ࣗಈΞχϝʔγϣϯ $44Ξχϝʔγϣϯ
9. Demo
10. ࣗಈΞχϝʔγϣϯ $44Ξχϝʔγϣϯ
11. ࣗಈΞχϝʔγϣϯ $44Ξχϝʔγϣϯ
12. $44Ξχϝʔγϣϯ
13. BOJNBUJPOͷϓϩύςΟ ϓϩτλΠϓϞʔυͰ֬ೝ !LFZGSBNFTͷ಺༰ σβΠϯϞʔυͰɺϓϩύςΟͷมԽΛ֬ೝ CSS Animation
14. BOJNBUJPOͷϓϩύςΟ
15. ϓϩτλΠϓϞʔυͰ
    ϙοϓΞοϓ΢Οϯυ΢Λ֬ೝ
16. 0.5s; animation-delay: ease-in-out; animation-timing-function: 1s; animation-duration:
17. !LFZGSBNFT
18. σβΠϯϞʔυͷϓϩύςΟͰ
    େ͖͞ɺҐஔɺ֯౓ɺෆಁ໌౓ͷมԽΛ֬ೝ
19. GSPN
    9࠲ඪ
    ɺෆಁ໌౓
20. UP
    9࠲ඪ
    ɺෆಁ໌౓
21. 9
    
    ෆಁ໌౓ 9
    
    ෆಁ໌౓ from to from { } to { } transform:translateX(0); opacity:1; transform:translateX(500px); opacity:0.5;
22. p { animation-duration: 1s; animation-delay: 0.5s; animation-timing-function: ease-in-out; } @keyframes { from { transform:translateX(0); opacity:1; } to { transform:translateX(500px); opacity:0.5; } } animation-name: sample-animation; sample-animation
23. Demo
24. Πʔδϯάͷछྨ
25.  猱  猱 ז׃ زٔؖ٦ ر؍ٖ؎ ،ؙءّٝ 獳⹛⯓ ؎٦آؚٝ 竰竲儗꟦ 儗꟦ 荈⹛،صً٦ءّٝ ז׃ ؎٦ؤ،ؐز ؎٦ؤ؎ٝ ؎٦ؤ؎ٝ  ،ؐز أشحف ٙ؎ٝس،حف غؐٝأ
26. ז׃ ؎٦ؤ،ؐز ؎٦ؤ؎ٝ ؎٦ؤ؎ٝ  ،ؐز أشحف ٙ؎ٝس،حف غؐٝأ
27. MJOFBS FBTFPVU FBTFJO FBTFJOPVU FBTF0VU#BDL ͕͍ۙ FBTF*O#BDL ͕͍ۙ গ͠ख͕͔͔ؒΔ cubic-bezier(0.175, 0.885, 0.32, 1.275); cubic-bezier(0.6, -0.28, 0.735, 0.045); ͳ͠ ΠʔζΞ΢τ ΠʔζΠϯ ΠʔζΠϯ  Ξ΢τ εφοϓ ϫΠϯυΞοϓ ό΢ϯε Πʔδϯά BOJNBUJPOUJNJOHGVODUJPO
28. MJOFBS FBTFPVU FBTFJO FBTFJOPVU FBTF0VU#BDL ͕͍ۙ FBTF*O#BDL ͕͍ۙ গ͠ख͕͔͔ؒΔ cubic-bezier(0.175, 0.885, 0.32, 1.275); cubic-bezier(0.6, -0.28, 0.735, 0.045); ͳ͠ ΠʔζΞ΢τ ΠʔζΠϯ ΠʔζΠϯ  Ξ΢τ εφοϓ ϫΠϯυΞοϓ ό΢ϯε Πʔδϯά BOJNBUJPOUJNJOHGVODUJPO
29. MJOFBS FBTFPVU FBTFJO FBTFJOPVU FBTF0VU#BDL ͕͍ۙ FBTF*O#BDL ͕͍ۙ গ͠ख͕͔͔ؒΔ cubic-bezier(0.175, 0.885, 0.32, 1.275); cubic-bezier(0.6, -0.28, 0.735, 0.045); ͳ͠ ΠʔζΞ΢τ ΠʔζΠϯ ΠʔζΠϯ  Ξ΢τ εφοϓ ϫΠϯυΞοϓ ό΢ϯε Πʔδϯά BOJNBUJPOUJNJOHGVODUJPO
30. MJOFBS FBTFPVU FBTFJO FBTFJOPVU FBTF0VU#BDL ͕͍ۙ FBTF*O#BDL ͕͍ۙ গ͠ख͕͔͔ؒΔ cubic-bezier(0.175, 0.885, 0.32, 1.275); cubic-bezier(0.6, -0.28, 0.735, 0.045); ͳ͠ ΠʔζΞ΢τ ΠʔζΠϯ ΠʔζΠϯ  Ξ΢τ εφοϓ ϫΠϯυΞοϓ ό΢ϯε Πʔδϯά BOJNBUJPOUJNJOHGVODUJPO