Transformation

๐Ÿ“š ์ง€์‹ ์ฑ„์šฐ๊ธฐ/์›น (ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ)

[HTML&CSS] Transition , Easing Function, Transformations

[HTML&CSS] Transition , Easing Function, Transformations ( UPDATE 2023 - 05 - 31 ) Transition transition '์–ด๋–ค ์ƒํƒœ์—์„œ ๋‹ค๋ฅธ ์ƒํƒœ๋กœ์˜ ๋ณ€ํ™”'๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์• ๋‹ˆ๋งค์ด์…˜์ด๋‹ค rule1> transtion์€ state๊ฐ€ ์—†๋Š” ์š”์†Œ์— ๋ถ™์–ด์•ผํ•œ๋‹ค. ๋งŒ์•ฝ state ์ž์ฒด์— transition์„ ์ค€๋‹ค๋ฉด ๋ณ€ํ™”๋ฅผ ์ค€ ์ƒํƒœ(์˜ˆ๋ฅผ๋“ค๋ฉด hover)๋ฅผ ๊ทธ๋งŒ ๋‘์—ˆ์„ ๋•Œ, ๋ฐ”๋กœ ๋ณ€ํ™” ์ด์ „์˜ ์ƒํƒœ๋กœ ๋Œ์•„๊ฐ„๋‹ค. rule2> transtion์€ state๊ฐ€ ๊ธฐ์ค€์ด ๋˜์–ด ๋ฐ”๋€Œ๋Š” ๊ฒƒ์ด๋‹ค. ์ƒํƒœ๊ฐ€ ๋ฐ”๋€Œ๋Š” ์š”์†Œ๊ฐ€ ์žˆ์„ ๋•Œ transition์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ์˜ˆ์‹œ) hover, active, focus ... Easing Function Easing Function ๋ธŒ..

์–‘์ฝฉ(Yangkong)
'Transformation' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก