CSS로 모핑 애니메이션 만들기

하나의 모양을 다른 모양으로 변환하는 기술인 CSS를 사용하여 모핑을 구현하는 방법을 알아봅니다.

모핑이란 무엇입니까?

모핑은 한 모습을 다른 모습으로 바꾸는 기술입니다. 이미지나 그림 등의 2차원 물체가 다른 모양으로 변하는 모양 이동 애니메이션입니다.

이 문서에서는 단순성을 위해 정사각형과 원을 번갈아 가며 사용하는 div를 만듭니다.

스피너 클래스로 div 요소를 정의합니다. 스피너에 기본 강등을 제공하고 2초가 걸리고 영원히 실행되는 Morph라는 사용자 지정 애니메이션으로 애니메이션을 적용합니다.

.spinner {
  width: 100px;
  height: 100px;
  animation: Morph 2000ms infinite;
}

요소의 모양을 변경하려면 Morph라는 사용자 지정 애니메이션을 정의해야 합니다. Morph 애니메이션이 0이고 100일 때 경계 반경을 50%로 설정하여 요소 모양이 원처럼 형성되고 애니메이션이 50%일 때 경계 반경을 0으로 설정하여 다시 정사각형으로 변경합니다.

다음으로 요소를 회전하고 모양이 바뀌는 동안 색상을 변경하여 보기 좋게 만들어 보겠습니다. 이를 위해서는 각 단계의 배경색을 설정하고 애니메이션 단계 중에 요소를 0도에서 180도 사이에서 회전시키는 변형 속성을 추가해야 합니다.

@keyframes Morph {
 0%, 100% {
   border-radius: 50%;
   transform: rotate(0deg);
   background-color: pink;
 }
 50% {
   border-radius: 0%;
   transform: rotate(180deg);
   background-color: lightblue;
 }
}

마지막으로 모핑 애니메이션이 작동하고 nexuscode.online에서 최종 코드를 보고 재생할 수 있습니다.