CSS3 전환 및 애니메이션을 사용하여 UI 변경 사항 강조 표시하는 방법

디자이너와 아티스트는 작품에 추가 레이어를 추가하기 위해 모션, 효과 및 다양한 종류의 환상을 실험해온 오랜 역사를 가지고 있습니다. op 미술 운동은 1960 년대에 착시 현상을 사용하여 움직임의 느낌을주기 시작했습니다..

그 이후로 다차원 운동을 사용하여 시청자의 관점을 확장시키는 최근 인기있는 운동 예술과 같은 새롭고 새로운 접근법이 등장했습니다. 모션은 1967 년 최초의 깜박이는 커서가 발명 된 컴퓨터 과학에서도 나타났습니다..

프론트 엔드 개발에서 CSS 요소가 릴리스되기 전에 DOM 요소는 일반적으로 JavaScript에 의해 애니메이션 처리되었으며 여전히 작동하는 방법이지만 CSS3에 의해 도입 된 새로운 속성 덕분에 우리는 디자인을 향상시킬 수있었습니다. 다른 효과와 동작으로 보다 직관적 인 방식으로.

CSS3가 제공하는 두 가지 주요 기술은 장면 전환과 애니메이션입니다. 이 게시물에서 우리는 그들이 무엇인지, 그 차이점은 무엇인지, 그리고 어떻게 차이점을 활용할 수 있는지 살펴볼 것입니다..

전환

전환과 애니메이션은 모두 국가의 변화를 시각화하다. HTML 요소의 CSS 속성 중 하나 이상 수정하기.

상태 변경 시각화의 가장 간단한 형태는 단추 나 링크의 색상을 변경하는 것입니다. 그것이 일어날 때, 요소는 약간 다른 스타일을 얻습니다. 이것은 화면에서 무엇인가가 움직이는 것처럼 관찰자에 의해 일반적으로 알려집니다.

호버 (또는 포커스 또는 클릭)에있는 링크의 CSS 속성을 변경하는 것은 가장 오래되고 간단한 전환 형태이며, CSS3 시대 이전에는 이미 존재했습니다.

 a color : orange;  a : hover color : red;  a : focus color : blue;  a : 방문한 색상 : 녹색; 

전환은 HTML 요소가 하나의 미리 정의 된 상태에서 다른 상태로 변경 될 때 사용됩니다. CSS3는 타이밍 기능이나 기간 제어와 같이 이전보다 더 복잡한 시각화를 허용하는 새로운 속성을 도입했습니다..

애니메이션이 어떻게 다른지 이해 한 후에 다음 섹션에서 새로운 CSS 속성을 살펴 보겠습니다. 지금은 전환에 대해 알아야 할 가장 중요한 사항을 살펴 보겠습니다..

1. 그들은 항상 시작과 끝 상태를가집니다..
2. 시작과 끝 지점 사이의 상태는 브라우저에 의해 암시 적으로 정의되며 CSS로 변경할 수 없습니다.
3. 그들은 명시 적 트리거링, CSS에 의한 새로운 가상 클래스 추가 또는 jQuery에 의한 새로운 클래스 추가.

아래의 스마트하게 활용 된 CSS3 전환의 아름다운 예를 볼 수 있습니다. 작성자는 숨겨진 정보를 방해가되지 않는 방식으로 표시하지만 사용자의 새로운 콘텐츠에 대한 집중을 유도합니다..

애니메이션

보다 복잡한 동작으로 상태 변화를 시각화하려는 경우 또는 명시적인 트리거가없는 경우 (예 : 페이지가로드 될 때 효과를 시작하려면 애니메이션을 사용하는 것이 좋습니다..

애니메이션을 사용하면 우리 자신의 설정 및 구성을 통해보다 복잡한 경로를 정의 할 수 있습니다. 키 프레임. 키 프레임 애니메이션 과정의 중간 지점으로, 원하는만큼 여러 번 애니메이션 요소의 스타일을 변경할 수 있습니다..

CSS3는 정교한 애니메이션을 제작할 수있는 훌륭한 방법을 제공하지만 일반적으로 전환을 만드는 것보다 생성하기가 더 어렵습니다. 그 덕분에 많은 애니메이션 라이브러리가있어 작업을 쉽게 할 수 있습니다.

CSS3 애니메이션에 대해 알아야 할 가장 중요한 사항은 다음과 같습니다.

1. 그들은 명시 적 트리거를 필요로하지 않으며, 페이지로드시 또는 브라우저에서 다른 DOM 이벤트가 발생할 때 시작할 수 있습니다
2. 예를 들어 새로운 클래스 나 pseudoclass가 추가되거나 제거 될 때와 같이 전환이 사용될 때 사용할 수 있습니다 (사용 빈도는 적지 만)
3. 그들은 우리가 몇몇 키 프레임 (중간 상태)을 정의 할 것을 요구한다.
4. 이 키 프레임의 수, 빈도 및 스타일을 지정할 수 있습니다.

아래의 예제에서 멋진 애니메이션 드롭 다운 메뉴를 볼 수 있습니다. 버튼을 클릭하면 애니메이션이 시작됩니다. 클릭 이벤트가 발생할 때 jQuery를 사용하여 목록 요소에 추가 클래스를 추가하면됩니다..

이 새 클래스는 지정된대로 애니메이션됩니다. @ 키 프레임 CSS 파일의 규칙 사용자가 다음에 버튼을 클릭 할 때 jQuery에 의해 추가 클래스가 제거되고 메뉴가 다시 숨겨집니다..

CSS 속성과 @ 키 프레임 앳 규칙

전환의 경우 Google은 전이 속기 속성 또는 4 개의 단일 전환 관련 속성 : 전이 속성, 전환 기간, 이행 타이밍 기능, 과 전이 지연. 속기 속성은 단축 형식의 모든 단일 속성을 포함합니다..

애니메이션의 경우 생기 8 개의 단일 애니메이션 속성을 나타내는 우리 손에 속기 속성 애니메이션 이름, 애니메이션 기간, 애니메이션 타이밍 기능, 애니메이션 지연, 애니메이션 반복 횟수, 애니메이션 방향, 애니메이션 채우기 모드, 과 애니메이션 재생 상태.

전환과 애니메이션 모두에서 가장 중요한 것은 항상 우리가 상태 변경 중에 수정할 CSS 속성을 지정해야합니다.. 변환을 사용하면 다음과 같이 보입니다.

 .요소 배경 : 오렌지; 전환 속성 : 배경; 이행 기간 : 3s; 이행 타이밍 기능 : 용이함;  .element : hover background : red; 

우리는 배경 이는 전환 도중에 변경 될 것이기 때문에.

하나의 전환에서 둘 이상의 CSS 속성을 변경할 수 있습니다.이 경우 위의 코드는 다음과 같이 수정됩니다. transition-property : 배경, 테두리;. 우리는 또한 전환 속성 : 모두;, 각 속성을 따로 지정하지 않으려는 경우.

우리는 속기를 선택할 수 있습니다. 전이 속성뿐만 아니라. 그렇게 할 경우 내부 속성의 올바른 순서에 항상주의해야합니다 (문서의 구문 참조).

 .요소 배경 : 오렌지; 전환 : 배경 3s 용이함;  .element : hover background : red; 

애니메이션을 만들려면 관련 애니메이션을 지정해야합니다. 키 프레임. CSS 속성을 개별적으로 수정해야합니다. @ 키 프레임 규칙대로. 다음은이 작업을 수행하는 방법의 예입니다.

 .요소 위치 : 상대적; 애니메이션 이름 : 슬라이드; 애니메이션 기간 : 3 초; 애니메이션 타이밍 기능 : 쉬이 인;  @keyframes slide 0 % 왼쪽 : 0;  50 % 왼쪽 : 200px;  100 % 왼쪽 : 400px; 

위 예제에서 우리는 아주 간단한 슬라이딩 효과를 만들었습니다. 우리는 애니메이션 이름, 그 다음 우리가 지정한 3 개의 키 프레임을 @keyframes 슬라이드 ... 규칙대로. 백분율은 애니메이션 기간을 나타내므로 예제에서 1.5 %에서 50 %가 발생합니다.

우리는 속기를 사용할 수 있습니다. 생기 속성을 추가하거나 더 간단한 키 프레임을 정의 할 수 있습니다. 에서부터 다음과 같은 방식으로

 .요소 위치 : 상대적; 애니메이션 : 슬라이드 3s 용이함;  @keyframes slide from 왼쪽 : 0;  ~ 왼쪽 : 400px; 

보다 복잡한 애니메이션을 제작하는 것은 자체 예술 형식입니다. 관심이 있다면, 고급 선택 윤곽을 만드는 방법과 바운스 효과를 만드는 방법에 대한 두 개의 애니메이션 자습서를 읽을 수 있습니다.

영상 효과와 애니메이션을 제작할 때, 모든 CSS 속성이 애니메이션으로 표시 될 수있는 것은 아닙니다., CSS Animatable에서 변경하려는 속성을 확인하는 것이 좋습니다..

CSS3 애니메이션 및 전환은 오랫동안 공급 업체 접두어로 처리되었으므로 더 이상 사용하지 않아도되지만 Mozilla 개발자 네트워크에서는 -웹킷 웹킷 기반 브라우저에 대한 지원이 최근에야 안정화됨에 따라 잠시 동안 접두사가 붙습니다..