[CSS] 12. 변형과 애니메이션(웹사이트에 동적 요소 추가하기)

CSS는 기본적인 스타일링뿐만 아니라 요소의 동적 효과를 추가하여 웹 페이지에 생동감을 더할 수 있습니다. Transform, Transition, Animation을 활용하면 웹 요소의 위치, 크기, 모양을 자유롭게 변형하거나 애니메이션 효과를 통해 부드럽고 자연스러운 상태 전환을 구현할 수 있습니다. 

Transform: 이동, 회전, 크기 변경

CSS에서 transform 속성을 사용하면 요소를 이동, 회전, 크기 변경 등의 변형을 할 수 있습니다. 이 속성은 2D 및 3D 변형을 모두 지원하며, 다양한 메서드를 통해 요소를 변형할 수 있습니다.

이동(translate): 요소를 X축과 Y축을 기준으로 이동시킵니다.

.box {
  transform: translate(50px, 100px); /* 요소를 오른쪽으로 50px, 아래로 100px 이동 */
}

회전(rotate): 요소를 지정한 각도만큼 회전시킵니다.

.box {
  transform: rotate(45deg); /* 요소를 45도 회전 */
}

크기 변경(scale): 요소의 크기를 확대 또는 축소할 수 있습니다. scale() 함수의 값을 1보다 크게 지정하면 확대되고, 1보다 작게 지정하면 축소됩니다.

.box {
  transform: scale(1.5); /* 요소 크기를 1.5배로 확대 */
}

Transition: 부드러운 상태 전환 만들기

transition 속성은 요소의 상태가 변경될 때 부드러운 전환 효과를 적용합니다. 이 속성을 사용하면 시간, 속도 곡선, 지연 시간을 조정하여 자연스러운 변화를 줄 수 있습니다.

예제: 마우스 호버 시 배경색이 부드럽게 바뀌는 예시입니다.

.button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out; /* 0.3초 동안 배경색이 부드럽게 전환 */
}

.button:hover {
  background-color: red; /* 마우스를 올렸을 때 배경색이 빨간색으로 변경 */
}

애니메이션: keyframes를 활용한 애니메이션

@keyframes 규칙을 사용하면 단계별 애니메이션을 만들 수 있습니다. 애니메이션은 변화의 각 단계를 정의하고, 요소에 적용되는 시간을 조절할 수 있습니다.

예제: 박스가 왼쪽에서 오른쪽으로 이동하는 간단한 애니메이션입니다.

@keyframes move {
  from {
    transform: translateX(0); /* 시작 위치 */
  }
  to {
    transform: translateX(200px); /* 끝 위치 */
  }
}

.box {
  animation: move 2s linear infinite; /* 2초 동안 이동하는 애니메이션이 반복됨 */
}

위 예제에서는 @keyframes를 통해 요소가 X축으로 200px 이동하도록 정의하였고, animation 속성으로 2초 동안 선형 이동 후 무한 반복되도록 설정했습니다.

결합하여 사용하기

transform, transition, @keyframes를 결합하여 다양한 애니메이션 효과를 구현할 수 있습니다. 웹 요소가 상호작용할 때 움직이거나 변형하는 것을 통해 사용자 경험을 더욱 동적이고 인터랙티브하게 만들 수 있습니다.

참고 사이트

• developer.mozilla.org
• css-tricks.com
• w3schools.com