Tweet
Tweet

Slide 1

Slide 1 text

"EPCF9%΍Ζ͏ͥ ʂ ͙͢࢖͑Δ8FCσβΠϯ5JQT দԼֆས

Slide 2

Slide 2 text

·ͭͨ͑͠Γ 8FC%51σβΠφʔ σδλϧϋϦ΢ουେࡕߍओװߨࢣ ίϯϐϡʔλઐ໳ֶߍ)"-ඇৗۈߨࢣ $44/JUFJO0TBLB࣮ߦҕһ௕ 9%Ϣʔβʔάϧʔϓ ʮେࡕ9%NFFUJOHʯओ࠻ দԼֆས matsu_eri

Slide 3

Slide 3 text

େࡕ9%.FFUJOH

Slide 4

Slide 4 text

fb.com/groups/xdstudy.osaka/

Slide 5

Slide 5 text

Osaka XD Meeting

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

ࠓ೔ͷྲྀΕ

Slide 8

Slide 8 text

ࣗಈΞχϝʔγϣϯ $44Ξχϝʔγϣϯ

Slide 9

Slide 9 text

Demo

Slide 10

Slide 10 text

ࣗಈΞχϝʔγϣϯ $44Ξχϝʔγϣϯ

Slide 11

Slide 11 text

ࣗಈΞχϝʔγϣϯ $44Ξχϝʔγϣϯ

Slide 12

Slide 12 text

$44Ξχϝʔγϣϯ

Slide 13

Slide 13 text

BOJNBUJPOͷϓϩύςΟ ϓϩτλΠϓϞʔυͰ֬ೝ !LFZGSBNFTͷ಺༰ σβΠϯϞʔυͰɺϓϩύςΟͷมԽΛ֬ೝ CSS Animation

Slide 14

Slide 14 text

BOJNBUJPOͷϓϩύςΟ

Slide 15

Slide 15 text

ϓϩτλΠϓϞʔυͰ ϙοϓΞοϓ΢Οϯυ΢Λ֬ೝ

Slide 16

Slide 16 text

0.5s; animation-delay: ease-in-out; animation-timing-function: 1s; animation-duration:

Slide 17

Slide 17 text

!LFZGSBNFT

Slide 18

Slide 18 text

σβΠϯϞʔυͷϓϩύςΟͰ େ͖͞ɺҐஔɺ֯౓ɺෆಁ໌౓ͷมԽΛ֬ೝ

Slide 19

Slide 19 text

GSPN 9࠲ඪɺෆಁ໌౓

Slide 20

Slide 20 text

UP 9࠲ඪɺෆಁ໌౓

Slide 21

Slide 21 text

9 ෆಁ໌౓ 9 ෆಁ໌౓ from to from { } to { } transform:translateX(0); opacity:1; transform:translateX(500px); opacity:0.5;

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Demo

Slide 24

Slide 24 text

Πʔδϯάͷछྨ

Slide 25

Slide 25 text

猱 猱 ז׃ زٔؖ٦ ر؍ٖ؎ ،ؙءّٝ 獳⹛⯓ ؎٦آؚٝ 竰竲儗꟦ 儗꟦ 荈⹛،صً٦ءّٝ ז׃ ؎٦ؤ،ؐز ؎٦ؤ؎ٝ ؎٦ؤ؎ٝ ،ؐز أشحف ٙ؎ٝس،حف غؐٝأ

Slide 26

Slide 26 text

ז׃ ؎٦ؤ،ؐز ؎٦ؤ؎ٝ ؎٦ؤ؎ٝ ،ؐز أشحف ٙ؎ٝس،حف غؐٝأ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content