jonbeo 님의 블로그

웹사이트에서 버튼을 누를 때 색이 부드럽게 바뀌는 것,슬라이드 메뉴가 천천히 열리는 것처럼사용자가 편안하게 느끼는 변화에는 항상 transition이 숨어 있어요.이번 포스팅 에서는 transition 속성 하나로도어떤 효과까지 줄 수 있는지 실습 중심으로 소개해보겠습니다. ✅ transition 기본 문법transition: [속성] [지속시간] [타이밍함수] [지연시간]; 예를 들어:button { background-color: #f00; transition: background-color 0.3s ease-in-out;}속성: 어떤 CSS 속성에 효과를 줄 건지지속시간: 얼마나 천천히 바뀔지 (ex. 0.3초)타이밍 함수: 속도가 일정한지 가속되는지 등지연시간: 몇 초 뒤에 시작할지 (선택 사..

웹사이트에서 버튼을 눌렀을 때 부드럽게 색이 바뀌거나, 배너가 좌우로 움직이는 걸 본 적 있죠?이런 자연스러운 움직임을 만드는 데 쓰이는 두 가지 핵심 속성이 바로 transition과 animation입니다.이번 포스팅에서는 이 둘의 차이점과 각각 어떻게 사용하는지 예시와 함께 차근차근 살펴볼게요! ✅ transition이란?transition은 "변화가 일어날 때 부드럽게 전환되도록" 만들어주는 속성이에요.어떤 스타일 속성이 바뀔 때, 그 변화가 천천히, 자연스럽게 일어나게 하는 거죠..box { width: 100px; height: 100px; background-color: tomato; transition: all 0.3s ease;}.box:hover { background-colo..