jonbeo 님의 블로그

이전 포스팅에서는hover, focus 같은 사용자 행동에 따라 부드럽게 반응하는 transition을 알아봤습니다.이번에는 자동으로 움직이는 애니메이션 효과,즉 animation 속성만으로 구현하는 다양한 활용법을 다뤄보겠습니다. ✅ animation 기본 문법animation: [이름] [지속시간] [타이밍함수] [지연시간] [반복횟수] [방향] [모드]; 조금 길어 보이지만, 자주 쓰는 건 아래 정도예요:.box { animation: moveBox 2s ease-in-out infinite alternate;}@keyframes moveBox { 0% { transform: translateX(0); } 100% { transform: translateX(200px); }} ✅ anima..

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