[css] 모션 필터

22 Dec 2023

CSS 모션 필터를 사용하면 웹 요소에 다양한 시각적 효과를 쉽게 적용할 수 있습니다. 이러한 효과는 사용자들의 경험을 향상시키고 웹 페이지에 동적인 느낌을 불어넣어줍니다.

모션 필터 속성

모션 필터를 사용하기 위해선 transform과 transition 속성을 이용합니다.

transform 속성은 요소의 크기, 위치, 회전, 기울기 등을 변경하는 데 사용됩니다. 다양한 함수들을 이용하여 다양한 효과를 줄 수 있습니다.

예시:

.element {
  transform: rotate(45deg);
  transform: scale(1.5);
  transform: translateX(20px);
}

transition 속성은 요소의 상태변화를 부드럽게 만들기 위해 사용됩니다. 상태가 변할 때 발생할 애니메이션 지속 시간, 타이밍 함수, 지연 시간을 설정할 수 있습니다.

예시:

.element {
  transition: all 0.3s ease;
}

다음은 모션 필터를 사용하여 마우스 오버 시 이미지가 회전하고 크기가 확대되는 간단한 예제입니다.

.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: rotate(20deg) scale(1.2);
}

이제 모션 필터를 적용해 보세요! 웹 요소에 다양한 효과를 쉽고 빠르게 부여할 수 있을 것입니다.

CSS 모션 필터에 대한 자세한 내용은 MDN 웹 문서를 참고하시기 바랍니다.