CSS 변환이 있는 드롭다운 메뉴 애니메이션 10개

이 책은 최초codinhood.com에 발표되었다
드롭다운 메뉴를 사용하면 페이지에 너무 많은 정보를 채우지 않고 특정 주제에 대한 더 많은 정보를 볼 수 있습니다.대부분의 드롭다운 메뉴 애니메이션은 두 가지 모드 중 하나를 따라 전체 메뉴를 그룹 설정 애니메이션으로 사용하거나 메뉴의 각 항목에 대한 애니메이션을 개별적으로 설정합니다.CSS 변환을 사용하면 드로잉, 레이아웃, 스타일 단계가 아닌 CSS 변환 affect the Composite step in your browser's Critical Rendering Path 으로 애니메이션을 설정할 수 있습니다.다음은 전체 메뉴와 항목마다 CSS 변환을 사용하는 다섯 개의 애니메이션입니다.CSS 구문은 Stylus 이며 SASS 과 유사합니다.
애니메이션은 재미있는 시각적 소질을 추가할 수 있지만 이러한 예시들은 좀 과장되어 애니메이션의 메커니즘을 더욱 뚜렷하게 할 수 있다는 것을 기억해 주십시오.

전체 드롭다운 메뉴의 애니메이션 설정하기

모든 메뉴의 구조는 동일합니다: dropdown 메뉴 제목과 숨겨진 메뉴의 용기입니다.dropdown_menu는 실제 메뉴 자체이며 기본적으로 숨겨집니다.

<li class="dropdown dropdown-6">
  Scale Down
  <ul class="dropdown_menu dropdown_menu--animated dropdown_menu-6">
    <li class="dropdown_item-1">Item 1</li>
    <li class="dropdown_item-2">Item 2</li>
    <li class="dropdown_item-3">Item 3</li>
    <li class="dropdown_item-4">Item 4</li>
    <li class="dropdown_item-5">Item 5</li>
  </ul>
</li>

dropdown_menu 전체 드롭다운 메뉴(제목 및 버튼)가 정지된 경우에만 표시됩니다.그러면 애니메이션 대신 드롭다운 메뉴가 표시됩니다.

.dropdown_menu
  position: absolute
  top: 100%
  left: 0
  width: 100%
  perspective: 1000px
  display: none
.dropdown:hover .dropdown_menu--animated
  display: block

메뉴의 애니메이션을 설정하려면 animation 속성을 dropdown_menu 에 추가해야 합니다.animation-name 속성은 @keyframes 규칙의 이름으로 설정해야 하며, 이 예에서는 growDown 이다. animation-fill-mode 속성은 애니메이션이 끝날 때 적용해야 할 스타일을 정의합니다.우리의 예에서, 우리는 메뉴를 닫은 상태에서 열린 상태로 설정합니다.이것은 우리가 최종 애니메이션 상태의 스타일을 유지하기를 원한다는 것을 의미한다. 이 값 forwards 은 우리가 이렇게 할 수 있도록 한다.

.dropdown_menu-6
  animation: growDown 300ms ease-in-out forwards

우리가 고려해야 할 마지막 속성은 transform-origin이다. 이것은 응용 애니메이션의 위치를 정의한다.우리의 애니메이션에 대해 이 속성은 메뉴의 물리적 출처를 정의합니다.기본 설정transform-origin은 버튼이 아닌 메뉴 중심에서 축소됩니다.예를 들어 roateXtransform 속성의 애니메이션을 설정할 때 기본값은 transform-origin입니다.
transform-origin을(를) top center로 변경하면 버튼에서 애니메이션이 회전합니다.

.dropdown_menu-6
  animation: growDown 300ms ease-in-out forwards
  transform-origin: top center

우리는 21 transform functions 규칙 중 하나를 선택하여 메뉴의 애니메이션을 설정할 수 있습니다.우리가 따라야 할 유일한 규칙은 애니메이션의 최종 상태100% 속성은 메뉴가 열릴 때의 정상적인 상태여야 한다는 것이다.예를 들어, 메뉴의 scaleY 에 애니메이션을 설정하면 scaleY 가 1 로 설정되어 애니메이션이 완성될 때 메뉴가 정상적으로 보이도록 해야 합니다.
각 애니메이션 오버 80% 또는 70% 주위의 예상 종료 상태를 확인한 다음 100% 의 종료 상태로 돌아갑니다.이것은 애니메이션에서 흔히 볼 수 있는 기술로 동량이나'반등'의 착각을 만들어 더욱 자연스러운 느낌을 주는 데 쓰인다.아래에 두 개의 예시가 표시되지만, 더 많은 예는 위의 코드 펜을 보십시오.

@keyframes growDown {
  0% {
    transform: scaleY(0)
  }
  80% {
    transform: scaleY(1.1)
  }
  100% {
    transform: scaleY(1)
  }
}

@keyframes rotateMenu {
  0% {
    transform: rotateX(-90deg)
  }
  70% {
    transform: rotateX(20deg)
  }
  100% {
    transform: rotateX(0deg)
  }
}

@ 키프레임 각 메뉴 항목의 애니메이션 설정하기

HTML 구조는 전체 메뉴를 설정하는 애니메이션과 같습니다.그러나 설정 opacity 외에 메뉴 항목마다 0 을 display: none 로 설정해야 합니다.우리가 이렇게 하는 것은 우리가 전체 메뉴를 애니메이션으로 설정할 때 했던 것처럼 모든 메뉴 항목을 바로 볼 수 있기를 원하지 않기 때문이다.반대로 우리는 투명도 설정을 바꾸는 애니메이션을 사용하여 각 보기에 애니메이션을 설정할 것이다.

.dropdown_menu li
  display: none
  color: white
  background-color: #34495e
  padding: 10px 20px
  font-size: 16px
  opacity: 0
  &:hover
    background-color: #2980b9

.dropdown:hover .dropdown_menu li
     display: block

전체 메뉴의 애니메이션을 설정하면 각 메뉴에 애니메이션만 추가할 수 있지만, 메뉴 항목마다 애니메이션을 설정하면 각 메뉴 항목에 별도의 animation 속성을 추가해야 한다는 것을 의미합니다.다행히도 모든 메뉴 항목은 같은 @keyframe 규칙, 같은 지속 시간, 같은 시간 계산 기능, 같은 animation-fill-mode 속성과 같은 transform-origin 속성을 공유합니다.유일하게 다른 속성이 필요한 것은 항목마다 애니메이션을 틀리게 하는 것이다.
우리는 서로 다른 애니메이션 지연으로 각 드롭다운 메뉴 항목에 CSS 선택기를 수동으로 작성하거나 터치 animation-delay 를 이용하여 각 드롭다운 메뉴 항목에 이 선택기를 교체하고 자동으로 생성할 수 있다.최종 결과는 같을 것이기 때문에 우리는 for 순환을 사용하여 우리의 생활을 더욱 가볍게 할 것이다.
드롭다운 메뉴마다 다섯 개의 메뉴 항목이 있는데 다섯 번 교체하려면 다음과 같은 문법을 사용할 수 있습니다. for num in (1..5).dropdown_item마다 일련 번호가 있는 클래스가 있습니다. dropdown_item-1, dropdown_item-2 등입니다. 따라서 우리는 num 변수와 for loop: .dropdown_item-{num} 변수를 사용하여 각각을 선택할 수 있습니다.마지막으로, 우리는 num 변수를 사용하여 항목마다 짝수를 지연시킬 수 있다.애니메이션 지속 시간이 300ms 인 경우 총 5개의 항목이 있습니다. 그러면 각 항목의 지연 시간60ms을 증가시킬 수 있습니다: (num * 60ms).이 모든 것을 함께 놓으면 다음과 같은 결과가 나온다.

.dropdown_menu-2
  for num in (1..5)
     .dropdown_item-{num}
        animation: rotateX 300ms (num * 60ms) ease-in-out forwards
        transform-origin: top center

@keyframe 규칙은 전체 메뉴 애니메이션과 거의 같지만 opacity부터 0까지 애니메이션 설정1을 제외합니다.

@keyframes rotateX {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  50% {
    transform: rotateX(-20deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}