[css] transition ๋ณ€ํ™”

blueยท2023๋…„ 1์›” 5์ผ

css

๋ชฉ๋ก ๋ณด๊ธฐ
6/11

๐Ÿง transition

transition ์†์„ฑ ๊ฐ’์€ ์ž์‹ ์š”์†Œ๋“คํ•œํ…Œ ๊ฐ๊ฐ ์ค˜์•ผ๋งŒ ๋จนํž˜

.box-wrap ๋ถ€๋ชจํ•œํ…Œ transition : .3s ์‹œ๊ฐ„์ฃผ๊ณ ,
์ž์‹ํ•œํ…Œ ์†์„ฑ ๊ฐ’ ์ฃผ๋ฉด ๋จ!

transition ์†๊ธฐ๋ฒ•

  • transition๊ด€๋ จ ์†์„ฑ๋“ค์„ ํ•œ๋ฒˆ์— ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์„ ์†๊ธฐ๋ฒ•์ด๋ผ๊ณ  ํ•œ๋‹ค.
transition: ์†์„ฑ ์‹œ๊ฐ„ ์†๋„ ์ง€์—ฐ์‹œ๊ฐ„;

์ฐธ๊ณ  ์‚ฌ์ดํŠธ
1.The transition-timing-function Property
https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed
2. transition ์†์„ฑ
https://velog.io/@yangddu/css-transition-%EB%B3%80%ED%99%94-%EC%86%8D%EC%84%B1

0๊ฐœ์˜ ๋Œ“๊ธ€