CSS 예제 14 / 20
transition 은 속성값이 바뀔 때 순간이동 대신 부드럽게 바뀌게 해줍니다. 오른쪽 버튼에 마우스를 올려보세요!
transition
:hover
timing-function
💡 이렇게 바꿔보세요
transition: 속성 시간 타이밍함수; 순서를 기억하세요 — 속성을 all 로 하면 편하지만 예상치 못한 것까지 애니메이션 될 수 있어요ease-in-out, linear, cubic-bezier(...) 로 움직임의 '느낌'을 바꿀 수 있어요- transition은 시작값과 끝값이 있을 때만 동작해요 —
display: none ↔ block 전환은 안 먹혀요 (opacity/transform 을 쓰세요)
← CSS 예제 목록