CSS로 애니메이션을 사용하여 메뉴의 전원을 켜십시오

Sep 11, 2025

어떻게

그것은 우리가 세계를 이해하는 애니메이션을 통해 다음과 같습니다 : 문은 열려있는, 자동차가 목적지로 운전하고, 입술을 미소 짓게합니다. 침대에서 그것을 사용하는 동안 당신의 얼굴에 전화를 찌푸거나 낙뢰처럼 즉석처럼 느끼는 것조차도 시간이 지남에 따라 일어납니다. 객체가 어떻게 관련되고 기능하는지 이해하는 것은 그 움직임을 통과합니다. 그들이 가볍거나 무겁거나 딱딱하거나 느슨하거나 연결되거나 분리되거나 끈적하거나 미끄러 릅니다.

그러나 웹에서는 눈 깜짝 할 사이에 나타나고 사라지는 데 익숙해졌습니다. 링크를 클릭하고 모든 것이 변경됩니다. 눈이 가리고 몇 번이나 주위에 회전하고 주변 환경을 치러 가기 위해 눈 가리개를 제거하는 것과 같습니다. 당신은 당신이 어떤 문을 입력했는지조차 모릅니다. 이것은 대부분의 사이트가 어떻게 지어 지는지에 익숙합니다. 우리는 더 잘할 수 있습니다.

잠재력에 대해 배우는 경우 CSS 애니메이션 , 우리의 상상력이 하이퍼 드라이브로 들어가서 모든 것에 대해 애니메이션을 뿌리게하는 것이 쉽습니다. 애니메이션이 크게 될 수 있지만 조심해야하며 항상 우리 스스로 물어볼 필요가 있습니다.이 애니메이션은 의미 있나요? 아름다운 이외의 값을 추가하는 것입니까? 우리 제품을 더 쉽게 사용할 수 있습니까?

의미있는 애니메이션

This is the starting point for the tutorial – the sample menu that we’ll reveal with an animation — 이것은 튜토리얼의 시작점입니다 - 애니메이션으로 드러내는 샘플 메뉴입니다.

이 기사에서는 공통으로 일할 것입니다 UI 디자인 요소 : 메뉴 토글. 우리는 CSS로 메뉴 (및 그로워지는 아이콘)를 만들고 애니메이션으로 살아남을 수 있습니다. 우리는 애니메이션이 의미가 있지만 가능한 한 부드럽게 보장하기 위해 웹 성능 모범 사례를 적용 할 것입니다.

당신은 할 수 있습니다 최종 결과를 미리 봅니다 ...에 사용자가 메뉴 아이콘을 클릭하면 화면을 덮어 아이콘의 배경 플레이트 (원)를 확장하고 메뉴 오버레이를 제시합니다.

닫기 아이콘으로 깜박이기보다는 3 개의 수직선 (메뉴 아이콘을 구성하는)을 'x'로 만드고 모프를 사용하여 닫기 아이콘을 나타냅니다. 즉, 메뉴가 닫히는 버튼으로 아이콘 모프가 표시됩니다.

01. 시작하십시오

By drawing the menu icon with CSS (and no images), we can easily animate it later — CSS (및 이미지가 없음)가있는 메뉴 아이콘을 그리면 나중에 쉽게 애니메이션 할 수 있습니다.

프로젝트 파일을 다운로드하십시오 ...에 개방 index.html. 브라우저에서 당신은 흰색 배경에 대해 세 개의 큰 링크를보아야합니다. 이것은 우리가 계시 할 메뉴 오버레이입니다.

우선 우리는 그것을 숨길 필요가 있습니다. 에 styles.css. ,이 스타일을 추가하십시오 .menu-overlay. :

 불투명도 : 0;
가시성 : 숨겨진;

오버레이가 사라 졌으면 왼쪽 상단 구석에 버튼이 나타납니다. 여기에 메뉴 아이콘을 그릴 수 있으므로 링크를 클릭하여 오버레이를 표시합니다. 애니메이션을 쉽게하기 위해서는 HTML과 CSS를 사용하여 그릴 것입니다. 비트 맵이나 벡터가 없습니다. 우리는 이미 HTML을 가지고 있습니다 index.html. 메뉴의 경우 : 컨테이너 ( .메뉴 ), 배경 ( .Menu-Circle. ), 링크 ( .menu-link.menu-link. )와 아이콘 ( .menu-icon. ) 각 라인에 대한 한 가지 스팬이 있습니다.

별도의 것을 가지고있다 이면 배경에 대해서는 다소 비 전통적인 접근 방식입니다. 이 원에 애니메이션을 추가하려고하지 않으면 별도의 필요 없을 것입니다. 이면 ; 우리는 단지 A를 추가 할 수 있습니다 국경 반경 배경색을 우리에게 메뉴 - 링크 ...에

그러나 우리는 자유롭게 사용하고 싶습니다. 변환 원의 속성이므로 아이콘 자체에 영향을 미치지 않고 확장 할 수 있으므로 아이콘에서 배경을 분리해야합니다.

아이콘을 구성하는 선을 그리는 것을 시작합시다. 그들은 모두 공통점이 무엇입니까? 그들은 똑같이 넓고, 그들은 둥근 모서리를 가지고 있으며, 절대적으로 배치되고 배경색이 있습니다. 모든 회선이 그를 공유하기 때문에 메뉴 라인 클래스,이 공유 속성을 설정하는 데 사용합시다.

 .Menu-line {
 배경색 : # 333;
 높이 : 2px;
 너비 : 100 %;
 국경 반경 : 2px;
 위치 : 절대;
 왼쪽 : 0;
}

그런 다음 회선의 고유 한 클래스를 사용하여 수직 위치를 설정할 수 있습니다.

 .menu-line-1 {top : 0; }

.menu-line-2 {
 TOP : 0;
 바닥 : 0;
 마진 : 자동;
}

.menu-line-3 {바닥 : 0; }

02. 호버 효과를 추가하십시오

To make the menu appear clickable, we inflate the background plate on hover — 메뉴를 클릭 할 수있게 만드는 데, 우리는 호버의 배경 플레이트를 팽창시킵니다.

호버 효과를 추가하여 아이콘을 명확하게 클릭 할 수있게 해 봅시다. 에 styles.css. , 새로운 선택기를 만듭니다 메뉴 - 서클 메뉴 위로 마우스를 올려 놓으면 확장하십시오.

 .menu : 호버 .Menu-Circle {Transform : Scale (1.4); }

이제 첫 번째 애니메이션을 추가 할 수 있습니다. 더하다 "전환 : 모두 0.2s 편리하게" ...에 .menu-circle {} (호버 상태가 아님). 우리는 브라우저에게 변경 될 수있는 모든 속성을 애니메이션하게 할 수 있습니다. .Menu-Circle. ...에 그래서 우리가 해버에서 그것을 확장 할 때, 0.2 초 동안 새로운 상태로 애니메이션이며 타이밍 기능이 있습니다. 쉽게 ...에

선택할 타이밍 기능은 어떻게 알 수 있습니까? 우선 선형 타이밍 기능을 사용하지 마십시오. 실제 세계에서 완벽하게 일정한 속도로 움직이는 것들은 선형 타이밍 기능으로 움직이는 물체가 부 자연스럽고 뻣뻣한 것처럼 보이는 경향이 있습니다. "하나님은 선형 타이밍 기능으로 주사위를 연주하지 않으므로"

규칙의 규칙으로서, 편리한 새로운 물체를 제시하는 데 훌륭하게 작동합니다 편리한 물체를 제거하는 데 훌륭하게 작동합니다. 의심 할 때, 쉽게 기본적으로 솔리드 타이밍 함수는 : 느리게 시작되고 느리게 끝나는 느린 끝이 부드럽고 유체 애니메이션을 만듭니다.

03. 메뉴를 표시하고 숨 깁니다

jQuery를 사용하여 새로 생성 된 오버레이를 보여주고 숨 깁니다. 에 script.js. , 클래스를 토글합니다 열다 의 위에 .menu-overlay. 기존 클릭 핸들러 안에 :

<미리 언어 = "JavaScript"> <코드> $ ( ". 메뉴 - 오버레이"). TOGGLECLASS ( "OPEN")

그런 다음 오픈 클래스가있는 경우 오버레이를 표시하십시오.

 .menu-overlay.open {
 불투명도 : 1;
 가시성 : 가시적 인;
}

04. 메뉴 아이콘을 연결하십시오

이전에 추가 한 전환은 오버레이를 표시하고 숨길 때 이미 깔끔한 페이드 효과가 있음을 의미합니다. 그러나 메뉴 아이콘 배경이 메뉴 오버레이가되는 것처럼 보일 수 있으며, 시각적으로 두 가지를 더 잘 연결할 수 있습니다.

이 효과를 달성하는 것보다 쉽습니다 : 우리가해야 할 일은 모두 클릭 할 때 메뉴 원을 빠르게 확대하는 것입니다. 오버레이는 동시에 페이드하므로 메뉴 아이콘이 오버레이로 변환하는 환상을 만듭니다.

메뉴를 클릭하면 메뉴의 원을 스타일링 할 수 있어야합니다. 개방 script.js. 및 기존 클릭 기능 내부에서 클래스를 열어줍니다. .메뉴 :

<미리 언어 = "JavaScript">


 $ ( ". 메뉴"). TOGGLECLASS ( "OPEN");

이제 우리는이 클래스를 CSS로 타겟팅하고 메뉴가 열리면 원을 확장 할 수 있습니다. 그 중 바로에서 style.css. , 확장 .Menu-Circle. 언제 .메뉴 또한 수업이 있습니다 .열다 :

 .menu.Open .Menu-Circle {Transform : Scale (60);
}

05. 아이콘을 변환하십시오

The white circle expands to become the menu background, and the icon morphs into an 'X' — 흰색 원이 확장되어 메뉴 배경이되고 아이콘이 'x'로 변형됩니다.

우리는 메뉴를위한 아름다운 공개 효과가 있지만 메뉴 아이콘을 어떻게 닫힌 아이콘으로 바꾸는가? 당신이 어떻게 알고 있는지는 놀랍습니다 - 우리는 3 개의 CSS 속성을 설정하면됩니다. 첫째, 메뉴가 표시되는 동안 중간 줄을 숨길 필요가 있습니다.

 .menu.open .menu-line-2 {불투명도 : 0; }

그런 다음 우리가해야 할 일은 반대 방향으로 다른 두 줄을 45 도로 뒤집습니다.

 .menu.open .menu-line-1 {
 변환 : 회전 (-45DEG);
}

.menu.Open .Menu-line-3 {
 변환 : 회전 (45DEG);
}

음, 일종의. 우리는 또한이 두 줄을 수직으로 가운데 가운데 가야합니다. 이 시점에서 당신은 '쉽게 생각할 수 있습니다! 우리는 그 단지 변경해야합니다 상단 과 바닥 그들을 중심으로하는 위치. 그리고 당신은 옳을 것입니다 - 우리 가이 아이콘을 애니메이닝하지 않은 경우.

우리는 스스로를 어떻게 애니메이션으로하는 것으로 제한하여 하드웨어 가속화 된 애니메이션만을 달성 할 수 있기 때문에 변환 과 불투명 속성, 우리는 변환을 통해 라인을 중심으로하는 것에 의지해야합니다.

 .menu.open .menu-line-1 {
 변환 : 번역 (7px) 번역 (-50 %) 회전 (-45DEG);
}

.menu.Open .Menu-line-3 {
 변환 : 번역 (-7px) 번역 (50 %) 회전 (45DEG);
}

이 변환은 아이콘 컨테이너 내에서 세로 중심을두고 두 줄을 움직이고 십자가를 형성하도록 회전합니다.

그것을 무너 뜨리자. 동시에 두 번의 번역본을 사용하고 있습니다. 번역 (7px) 과 번역 (-50 %) ...에 첫 번째 변환, 번역 (7px) 라인의 상단 가장자리를 캔버스의 수직 중심으로 이동하는 데 사용됩니다. 여기에있는 수학은 간단합니다 : 14는 우리의 아이콘의 높이이며, 우리는 중간 지점을 얻는 두 사람으로 나눌 수 있습니다 : 7.

두 번째 변환, 번역 (-50 %) 선을 옮기는 선의 수직 센터가 캔버스의 수직 중심점에 거주하도록 선을 움직이게하는 데 사용됩니다.

대개를 사용할 때 비율 로그인 CSS 요소의 부모 (설정)를 참조하십시오. 너비 : 100 % 요소의 너비와 부모의 너비와 일치하지만 부모가 아닌 요소 자체를 참조하는 변환 속성을 사용하여 백분율을 사용하는 경우. 그래서 우리가 선의 높이를 찾아서 그것을 위쪽으로 움직이는 것은 우리가 필요로하는 모든 것입니다. 번역 (-50 %) ...에

06. 아이콘 사이의 모프

메뉴 아이콘을 닫기 아이콘으로 바꾸는 대신 두 상태 사이의 모프를 봅시다.

전환을 추가하여 시작하십시오 .Menu-line. 에 style.css. :

 전환 : 모두 0.25S 편리한;

타다! 모핑 메뉴 아이콘입니다. 애니메이션은 조금 둔합니다. 그걸 해결해 봅시다. 선을 더 생생하게 보이게하려면 추가 90도 추가로 회전 할 수 있습니다. 아이콘은 끝에서 동일하게 보이지만 라인은 같은 기간 동안 더 멀리 이동합니다. 회전을 바꾸십시오 회전 (-135DEG) 과 회전 (135DEG) ...에

엄지 손가락의 규칙으로서, 애니메이션에 적합한 사용자 정의 Bézier 곡선을 사용하여 항상 애니메이션을 향상시킬 수 있습니다. 우리는 현재 사용 중입니다 쉽게 - 이것은 애니메이션이 중간에 빠른 속도로 느린 시작과 끝을 가질 것임을 의미합니다.

나는 더 많은 봄 같은 효과가 우리 아이콘을 위해 피팅이라고 생각합니다. 그것이 끝나는 것처럼 작은 바운스 효과로 빨리 회전하자. 에 대한 .Menu-line. , " 편리한 흡입 맞춤 Bézier 곡선으로 :

 전환 : 모두 0.25S 입방 - 베 지어 (0.175, 0.885, 0.32, 1.275);

그 모든 숫자는 무엇입니까? 걱정하지 마십시오. Bézier Curves는 거의 손으로 쓰여지지 않습니다. 너는 사용한다 큐빅 - 베 지어 () 시간이 지남에 따라 애니메이션의 속도를 정의하고 자신을 쓰는 대신 참조 사이트를 사용하는 것이 좋습니다. 이것은 Easings.net에서 제공됩니다. 애니메이션이 끝날 때 오버 슈팅이며 미묘한 바운스 효과를 만듭니다.

우리가 그것에있는 동안, 가자 easings.net. 코드를 잡아라 easeoutexpo. ...에 메뉴 배경 애니메이션에 더 세련된 효과를 만들려면이 기능을 사용합니다. 전환을 업데이트하십시오 .Menu-Circle. 이 사용자 정의 베 지어 곡선을 사용하고 애니메이션을 조금 더 긴 (0.5 초) 만듭니다.

 전환 : 모두 0.5S 입방 - 베 지어 (0.19, 1, 0.22, 1);

축하드립니다. 의미있는 애니메이션 세트를 만들었습니다. 사이트에서 탐색하는 동안 현장에서 일어나는 일을 이해하는 데 도움이되므로 공간 인식 감각을 창출합니다. 그 위에 애니메이션이 원활하게 실행됩니다.

변환 및 불투명도 속성을 애니메이션으로 만 애니메이션으로 인해 브라우저의 하드웨어 가속 지원이 들어가서 불필요한 지연을 피할 수 있는지 확인할 수 있습니다. 애니메이션으로 놀 때,이 두 상자를 선택하십시오. 의미 있고 아름답게 만드십시오.

이 기사는 원래 나타났습니다 그물 잡지 문제 281. 여기 Net을 구독하십시오 ...에

관련 기사:

10 CSS3 애니메이션의 인상적인 예
28 CSS의 뛰어난 예제
웹 접근성을 시작하십시오

CSS로 애니메이션을 사용하여 메뉴의 전원을 켜십시오

의미있는 애니메이션

관련 요소

01. 시작하십시오

02. 호버 효과를 추가하십시오

03. 메뉴를 표시하고 숨 깁니다

04. 메뉴 아이콘을 연결하십시오

05. 아이콘을 변환하십시오

06. 아이콘 사이의 모프

어떻게 - 가장 인기있는 기사

페인트 브러시를 청소하는 방법 : 확실한 가이드

라이온을 그리는 방법

마우스로 제어 된 시차 배경 효과 생성

라인 아트를 사용하여 환영 인테리어를 만듭니다

블렌더에서 복잡한 3D 공상 과학 장면을 짓는다

사실적인 실장을 만드는 방법

반응성있는 SVG에 대한 10 개의 황금 규칙

웹 디자인 기관의 이름을 지정하는 방법

카테고리