CSS 애니메이션 고급 활용

CSS 애니메이션은 단순한 색상 변화부터 복잡한 움직임까지 다양한 효과를 만들 수 있음. 기본적으로 transition은 상태 변화에 부드러움을 주고, @keyframes는 특정한 흐름을 정의해 애니메이션을 실행함. 예시는 다음과 같음.

.box { width:100px; height:100px; background:tomato; transition: all 0.5s ease; }
.box:hover { transform: scale(1.2) rotate(10deg); background:gold; }
 

위 코드는 마우스를 올리면 박스가 확대되고 회전하며 색상이 변하는 효과를 줌. 더 복잡한 애니메이션은 keyframes를 사용함.

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}
.ball { width:50px; height:50px; border-radius:50%; background:skyblue; animation: bounce 1s infinite; }
 

위 코드는 공이 위아래로 튕기는 듯한 무한 반복 애니메이션을 구현함. 실무 팁으로는 GPU 가속이 가능한 transform과 opacity 위주로 애니메이션을 구성해야 성능 저하가 적고, transition-delay나 animation-delay를 활용해 요소마다 살짝 다른 타이밍을 주면 자연스러운 인터랙션이 가능함. 실습은 아래 코드로 확인할 수 있음.

<div class="box"></div>
<div class="ball"></div>
 

브라우저에 적용하면 박스는 hover 시 변형되고, 공은 자동으로 튕기는 애니메이션을 반복하게 됨.