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(타이밍 함수)은 처음과 끝에서는 천천히, 중간은 빠르게 실행됨

2) @keyframes + animation - 복잡한 애니메이션

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.box {
    width: 100px;
    height: 100px;
    background: red;
    animation: bounce 1s infinite;
}

 

• @keyframes를 사용하여 애니메이션의 단계 정의
• animation 속성을 사용하여 적용

---

3. 애니메이션 속성 상세 정리

속성	설명	예제
animation-name	애니메이션 이름 지정	animation-name:bounce;
animation-duration	애니메이션 지속 시간	animation-duration: 2s;
animation-timing-function	움직임 속도 조절	animation-timing-function:ease-in-out;
animation-delay	시작 전 지연 시간	animation-delay: 1s;
animation-iteration-count	반복 횟수	animation-iteration-count:infinite;
animation-direction	애니메이션 방향	animation-direction: alternate;
animation-fill-mode	애니메이션 종료 후 상태	animation-fill-mode: fowards

 

• animation-direction: alternate; 정방향 -> 역방향 반복
• animation-fill-mode:forwards; 애니메이션이 끝난 후, 마지막 프레임 상태를 유지하는 속성

animation: 애니메이션이름 실행시간 타이밍함수 지연시간 반복횟수 방향 종료상태;

 

---

4. animation-timing-function 상세 정리

값	설명	움직임 패턴
linear	일정한 속도	🔲→🔲→🔲→🔲
ease	시작과 끝이 부드럽고 중간은 빠름(기본값)	⏳🔲→🔲→🔲→🔲
ease-in	시작이 느리고 점점 빨라짐	🐢→🐇
ease-out	시작이 빠르고 점점 느려짐	🐇→🐢
ease-in-out	시작과 끝이 느리고 중간이 빠름	🐢→🐇→🐢
cubic-bezier(x, y, z, w)	커스텀 속도 설정	🎛 조절 가능

 

cubic-bezier 예제

.box {
    animation: move 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

• 커스터 베지어 곡선을 사용하여 세밀한 제어 가능
• https://cuibc-bezier.com/에서 직접 조절 가능

---

5. 실전 테크닉 & 고급 애니메이션

1) 버튼 클릭 효과

버튼을 클릭 시 살짝 눌리는 효과 구현(축소 후 원래 크기로 복귀)

@keyframes clickEffect {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.button {
    animation: clickEffect 0.2s;
}

 

 

 

2) 흔들리는 아이콘 애니메이션

아이콘이 좌우로 흔들리는 애니메이션

@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

.icon {
    animation: shake 0.5s infinite;
}

 

---

6. css 애니메이션 성능 최적화

• 1. will-change: transform; -> 미리 렌더링 준비
• transform:translate 사용하기 -> top, left보다 부드러움
• 애니메이션 요소 개수 최소화 -> 너무 많으면 성능 저하