CSS 애니메이션 효과 만들기 및 참고 사이트

• Transition과 Transform
  • 요소에 전환 효과를 주어 부드러운 변화(예: 위치 이동, 회전, 크기변경 등)를 구현할 수 있음.
  • 상태에 따라 동일 속성에 대해 다른 시간 값 및 타이밍 함수를 부여하여 애니메이션 효과를 조절 가능.
• 타이밍 함수 종류
  • ease, ease-in, ease-out, linear, cubic-bezier(...) 등으로 애니메이션 속도를 조절함.
• Keyframes
  • @keyframes를 이용해 복잡한 애니메이션 경로를 정의하고, animation 속성으로 적용함.
  • animation-fill-mode로 애니메이션 종료 후 상태 유지, animation-play-state로 애니메이션 일시정지를 제어할 수 있음.

---

1. 애니메이션 기본 – Transition과 Transform

A. 기본 전환 설정

• 목적: 요소에 hover 시 배경색과 위치, 회전, 크기, 기울임 등을 동시에 변화시키는 예제

/* 기본 상태: 전환 속성(transition)을 설정 */
.box_wrap1 .box {
  transition: transform 5s, background-color 10s;
}

/* hover 상태: 전환 시 배경색과 transform 효과 적용 */
.box_wrap1:hover .box {
  transition: transform 5s, background-color 10s;
  background: red;
  transform: translateX(1150px) rotateZ(-4320deg) scale(2.3) skew(45deg);
}

/* 
  참고:
  - transition을 기본 상태(1)만 지정하면 애니메이션이 양방향(들어갔다 나오는) 효과를 볼 수 있음.
  - hover 상태(2)만 주면, 이동(transform)만 애니메이션됨.
  - 두 상태 모두 transition을 지정하고 시간 값을 다르게 하면, hover 시와 원상복귀 시의 속도를 각각 조절할 수 있음.
  - transform 함수:
    - translateX: x축 이동 거리
    - rotateZ: z축 회전
    - scale: 크기 변화
    - skew: 기울임 효과
*/

B. 전환 속도 및 타이밍 함수

• 목적: 애니메이션 속도(가속, 감속, 등속도)를 조절하는 다양한 타이밍 함수를 보여줍니다.

.box_wrap1 .box {
  /* 기본값 (ease) */
  transition: all 5s ease;
  
  /* 가속 (ease-in): 느리게 시작한 후 빠르게 */
  transition: all 1s ease-in;
  
  /* 감속 (ease-out): 빠르게 시작해서 느려짐 */
  transition: all 1s ease-out;
  
  /* 커스텀 타이밍 (cubic-bezier) */
  transition: all 1s cubic-bezier(0.08, 0.82, 0.17, 1);
  
  /* 등속도 (linear) */
  transition: all 1s linear;
}

---

2. Keyframes를 사용한 애니메이션

A. 기본 Keyframes 예제

• 목적: keyframes를 사용하여 요소가 사각형 경로로 이동하도록 설정

@keyframes moveBox {
  /* 25% 시점: x축으로 1150px 이동 */
  25% {
    transform: translate(1150px, 0);
  }
  /* 50% 시점: x축 1150px, y축 100px 이동 */
  50% {
    transform: translate(1150px, 100px);
  }
  /* 75% 시점: x축 0, y축 100px 이동 */
  75% {
    transform: translate(0, 100px);
  }
  /* 100%: 원래 위치(0, 0)로 복귀 */
  100% {
    transform: translate(0, 0);
  }
}

B. keyframes를 적용하는 방법

• 기본 문법:

.box_wrap3 .box {
  animation: moveBox 2s ease 0s infinite normal forwards;
  /* 
    animation: [이름] [지속시간] [타이밍 함수] [지연시간] [반복 횟수] [방향] [fill-mode];
    예시에서는 반복 없이 2초 동안 애니메이션하며, 애니메이션이 끝난 후 마지막 상태를 유지(forwards)
  */
}

• 예제: hover 시 keyframes 애니메이션 적용

/* 기본 상태: moveBox 애니메이션을 5초 동안 실행 */
.box_wrap3 .box {
  animation: moveBox 5s;
}

/* hover 상태: 애니메이션을 일시정지 */
.box_wrap3:hover .box {
  animation-play-state: paused;
}

• 참고:
  • animation-fill-mode: forwards;를 설정하면 애니메이션 종료 후에도 마지막 상태를 유지할 수 있습니다.
  • animation-play-state: paused;를 사용하여 hover 시 애니메이션을 멈출 수 있습니다.

---

참고 사이트: https://easings.co/ cubic-bezier / https://animista.net/

Animista - On-Demand CSS Animations Library

 

Easings - Generate, test and share custom easing curves.