728x90 300x250 SMALL css애니메이션3 css애니메이션 한방에 정리하기!(transition, transform, animation) 1. css애니메이션이란?CSS애니메이션은 html 요소를 움직이게 만드는 방법이다.JavaScript없이도 가능하다.주요 방식 :transition - 요소 상태 변화 애니메이션@keyframes + animation - 복잡한 애니메이션 구현2. CSS 애니메이션 기본 사용법1) transition - 간단한 애니메이션.box { width: 100px; height: 100px; background: red; transition: background-color 0.5s ease-in-out;}.box:hover { background-color: blue;}transition 속성:속성명 지속시간 타이밍함수 지연시간ease-in-out(타이밍 함수)은 처음과 끝에서는 천천.. 2025. 4. 4. 까딱거리는 아이콘 css 애니메이션 @keyframes tilt { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); }}.icon { width: 100px; height: 100px; display: block; margin: 50px auto; animation: tilt 1s ease-in-out infinite;} 아이콘이 좌우로 자연스럽게 흔들린다.(transform:rotate(-10deg) -> rotate(10deg)애니메이션은 infinite로 반복된다.ease-in-out을 적용해 부드러운 움직임을 준다. "> 2025. 3. 23. hover효과를 이용한 인터렉티브 UI 만들기 호버 효과를 사용하여 마우스를 올리면 시각적으로 변하는 인터렉티브한 UI를 만들어 보자. .card요소에 :hover상태를 추가하여, 마우스를 올렸을 때 카드 크기가 커지고 그림자가 진해지는 효과를 구현한다.transition 속성을 사용하여 애니메이션 효과를 부드럽게 적용하고 있다. "> 2025. 3. 19. 이전 1 다음 728x90 반응형 LIST