CSS3 애니메이션을 잘 활용하는 방법 : 튜토리얼, 샘플 코드 및 예제

JS와 jQuery를 사용하면 애니메이션을 완전히 제어 할 수 있고 멋진 효과를 만들 수 있지만 가격은 매우 높습니다. 처리 시간, 브라우저 간 호환성 (예 : JS와 관련하여 모바일 장치는 상당히 다름)과 코드 복잡성 자체는 애니메이션 인터페이스를 만드는 동안 명심해야 할 사항입니다..


오늘은 CSS 애니메이션 및 전환을 사용하여 JS를 피하는 방법을 살펴 보겠습니다. 기본적인 단계부터 아코디언 패널 및 애니메이션 하위 메뉴와 같은 멋진 효과에 이르기까지 살펴 보겠습니다..

자리를 잡고 메모장과 실제 브라우저 (IE 제외)를 시작해 봅시다..

워밍업

우리는 CSS 애니메이션을 사용하는 데있어 몇 가지 장점과 단점이 있습니다. 상사 나 고객에게 판매해야하는 경우 다음 사항을 명심하십시오.

  • HTML5 구현으로 하드웨어 가속을 사용할 수 있기 때문에 잠재적으로 더 빠릅니다.
  • 휴대 기기에서 성능이 향상되며 터치 이벤트를 추적하기 위해 특정 코드가 필요하지 않습니다.
  • JS는 브라우저에서 해석해야하며 브라우저를 중단 할 가능성이 훨씬 더 큽니다. 따라서 CSS가 실패하면 JS가 전체 페이지를 중단 할 수있는 동안 자동으로 실패합니다.
  • 그들은 꽤 좋은 브라우저 지원을 제공합니다 (이 사이트는 http://caniuse.com/#search에서 특정 통계를 확인하는 데 도움이됩니다)

CSS3 애니메이션의 예

이 포스트의 고기를 시작하기 전에 순수한 CSS로 만든 아름다운 애니메이션을 살펴 보겠습니다..

순수한 CSS 트위터 실패 고래

애니메이션 실패한 고래

 Steven Dennis 제작.

순수한 CSS 스크롤링 콜라 캔
CSS 3 애니메이션 예 : 스크롤 코크스 캔

Roman Cortes에 의해 제작되었습니다..

순수한 CSS 워킹 맨

CSS 3 애니메이션 예 : 워킹 맨

 앤드류 호이어 (Andrew Hoyer) 제작.

손을 더럽 히기

코드를 시작하겠습니다. 많은 CSS 의사 클래스를 사용하여 애니메이션을 트리거합니다. 솔직히 말해서 많은 개발자들이 JS를 사용하여 애니메이션을 활성화 및 비활성화 할 것을 권장하지만 여기에서 더 쉬운 방법을 볼 수 있습니다.

#테스트 {
배경 : 빨강;
}
#test : 호버 {
배경 : 녹색;
}
#test : active {
배경 : 파랑;
}
#test : target {
배경 : 검정;
}

사용할 다른 의사 클래스가 몇 가지 있지만 아이디어가 있습니다. #test 요소를 클릭하면 (링크라고 가정) 다음과 같이됩니다.

  • 정상 상태 : 배경이 빨간색입니다
  • 호버 : 마우스가 요소 영역으로 들어가면 녹색 배경이됩니다
  • 활성 : 커서를 클릭하고 마우스 버튼을 누른 상태에서 배경색은 파란색입니다
  • 타겟 : 현재 페이지의 URL에 #test가 있으면이 요소는 검은 색이됩니다.

이들 각각은 CSS 애니메이션에 사용될 수 있습니다. 예를 들어 다음 코드와 함께 대상 의사 요소를 사용하여 CSS 애니메이션을 활성화 및 비활성화하는 2 개의 링크를 만들 수 있습니다.

활성화
비활성화

CSS 전환

CSS 전환은 초기 상태에서 종료 상태로 부드럽게 변경됩니다. 따라서 “전환”속성을 사용하여 기본 선택기에서 시간 및 영향을받을 각 속성과 애니메이션의 방식을 사용하여 정의 할 수 있습니다. 예를 보자.

.테스트 {
/ * 전환 속성 지속 시간 타이밍 기능, * /
파란색;
전환 : 색상 2, 글꼴 크기 2 용이성;
}
.테스트 : 호버 {
색깔 : 빨강;
}
.테스트 : 활성 {
폰트 크기 : 200 %;
}

.test 요소를 가리키면 색상이 파란색에서 빨간색으로 점진적으로 변경됩니다 (아주 좋은 팔레트입니까?). 요소를 클릭하면 글꼴 크기가 기본 글꼴 크기의 200 %로 점차 증가합니다..

또한 애니메이션에 사용할 수있는 “시간”이 사용되는 방식으로 “전환 시간”속성을 쉽게 설정할 수 있습니다. 가능한 값은 다음과 같습니다.

  • 리니어 : 처음부터 끝까지 동일한 속도
  • 용이성 : 슬로우 스타트
  • 여유 : 느린 끝
  • 용이성 : 느린 시작, 중간에서 빠른, 느린 종료
  • 여유 : 느린 시작, 느린 종료
  • 큐빅 베 지어 (a, b, c, d) : 사용자 정의 속도

3 차 베 지어 기능은 애니메이션 속도 X 지속 시간에 대한 수학적 곡선을 나타내는 0에서 1까지 다양한 4 개의 숫자로 사용자 정의 애니메이션을 만듭니다..

더 나은 브라우저 호환성을 위해 다음과 같이 오페라, Firefox 및 웹킷에 벤더 접 두부를 사용하는 것이 좋습니다.

div {
너비 : 400px;
-o- 전이 : 폭 2;
-모즈-전이 : 폭 2;
-웹킷 전환 : 너비 2;
전이 : 폭 2;
}

또한 미디어 쿼리를 사용하여 브라우저 너비 (모바일 장치, 태블릿)에 따라 다른 전환을 정의 할 수 있습니다. 이것은 간단한 예입니다.

신체 {
글꼴 크기 : 1em;
}
@ 미디어 화면 및 (최대 너비 : 800 픽셀) {
신체 {
글꼴 크기 : 0.8em;
}
}
@ 미디어 화면 및 (최대 너비 : 400 픽셀) {
신체 {
글꼴 크기 : 0.7em;
}
}

브라우저 너비를 늘리면 글꼴 크기가 갑자기 변경됩니다. 이 코드는이를 방지하여 훨씬 더 부드러운 전환을 제공합니다.

신체 {
-o- 전이 : 폰트 크기 0.5s 선형;
-moz- 전환 : font-size .5s linear;
-웹킷 전환 : font-size .5s linear;
전이 : font-size .5s linear;
}

너비, 색상, 패딩, 메뉴 표시를 변경하려는 경우 세로 / 가로 화면이 다르거 나 크기가 다른 경우에도 사용할 수 있습니다..

CSS 애니메이션 – 진정한 재미 시작

애니메이션은 단일 선택기에 정의 된 일련의 전환입니다. CSS 애니메이션을 정의하려면 2 단계를 수행해야합니다..

@keyframe 규칙은 일련의 애니메이션 단계를 정의하는 데 사용되며 고유 한 이름과이 애니메이션의 작동 방식을 설명하는 스타일로 정의됩니다. 평소처럼이 예와 같이 공급 업체 접두사가 필요합니다.

/ * 각 공급 업체에 대해 동일한 코드 * /
@ -o- 키 프레임 내 애니메이션 { …
@ -moz-keyframe 내 애니메이션 { …
@ -webkit-keyframe 내 애니메이션 { …
/ * 애니메이션 이름 * /
@keyframe 내 애니메이션 {
/ * 프레임 선택기 * /
0 % {
/ * 프레임 스타일 * /
왼쪽 : 0px;
상단 : 0px;
}
25 % {
왼쪽 : 200px;
상단 : 0px;
}
50 % {
왼쪽 : 200px;
상단 : 200px;
}
75 % {
왼쪽 : 0px;
상단 : 200px;
}
100 % {
왼쪽 : 0px;
상단 : 0px;
}
}

따라서 각 스타일은 프레임 / 시간 프레임 (플래시 애니메이션의 프레임과 같은)에 따라 백분율과 적용 할 스타일로 정의됩니다. 예를 들어이 키 프레임은 요소가 왼쪽, 위쪽, 오른쪽, 아래쪽으로 이동한다고합니다..

1 단계를 수행하고 키 프레임을 만든 후에는 실제로 키 프레임을 요소에 적용 할 수 있습니다. 그런 다음 CSS 전환에서 수행 한 것과 거의 동일한 논리를 사용합니다. 차이점은 이제 ‘전환’이 매우 복잡한 애니메이션이라는 점입니다..

적용하려면 애니메이션 속성을 사용하고 7 개의 하위 속성이 있습니다.

  • 이름 : 고유 식별자
  • 지속 시간 : 0 %에서 100 %까지 걸리는 시간
  • 타이밍 기능 : 전환 타이밍 기능과 거의 동일
  • 지연 : 0 %를 시작하는 데 얼마나 걸립니까
  • 반복 횟수 : 반복 횟수 (무한 루프의 경우 “무한”)
  • 방향 : 정상 또는 대체 (역)
  • 재생 상태 : 애니메이션이 실행 중이거나 일시 중지 된 경우

그러면 페이지의 대상이 될 때 #test 요소에 애니메이션이 적용됩니다.

#test : target {
/ * 애니메이션 이름 | 기간 | 타이밍 기능 | 지연 | 반복 횟수 | 방향 | 플레이 상태 * /
애니메이션 : 내 애니메이션 10s 선형 0 무한 무한 실행;
}

이를 염두에두고 몇 가지 멋진 예를 만들 수 있습니다..

CSS 전용 아코디언

CSS 애니메이션을 사용하여 접을 수있는 패널을 만듭니다. 기본 HTML 구조는 다음과 같습니다.

탭 1

텍스트 1

탭 2

텍스트 2

탭 3

텍스트 3

그러면 패널과 각 패널을 트리거하는 링크가 만들어집니다. 그리고 여기 마법이 일어나는 곳이 있습니다 :

/ * 아코디언 안에있는 모든 div * /
.아코디언 사업부 {
/ *는 기본적으로 숨겨져 있습니다 * /
높이 : 0;
오버플로 : 숨겨진;
/ * 흑 마법 * /
전이 : 높이 1;
}
/ * 언급 된 div가 대상인 경우 * /
.아코디언 div : 타겟 {
/ * height : auto는 작동하지 않지만 정상적으로 작동합니다 * /
높이 : 80px;
}

아주 간단 하죠? 그리고 당신은 이것을 위해 JS를 사용하여 평생을 보냈습니까? :)

하위 메뉴가있는 CSS 전용 메뉴

그리고 이것은 또 다른 간단한 응용 프로그램입니다. 당신은 확실히 당신의 사이트에 탐색 메뉴를 가지고 있으며, 종종 우리는 거기에 일부 하위 메뉴를 사용해야합니다. 항목을 표시하고 숨기는 가장 좋은 방법은 jQuery를 사용하는 것입니다. 이 코드를 테스트 한 후에 다시 생각해보십시오.

  • 항목 1
    • 항목 1.1
    • 항목 1.2
  • 항목 2
    • 항목 2.1
    • 항목 2.2

그리고 마법사는 여기에서 시작됩니다.

ㅏ {
/ * 링크를 좀 더 좋게 만드는 것 * /
디스플레이 : 블록;
패딩 : 4px;
}
탐색 {
텍스트 정렬 : 가운데;
}
/ * 모든 메뉴 (기본 메뉴 포함) * /
내비게이션 {
디스플레이 : 인라인 블록;
리스트 스타일 : 없음;
}
탐색>ul>리 {
/ * 가로 항목 (세로도 제대로 작동 함) * /
왼쪽으로 뜨다;
}
nav li div {
/ * 하위 메뉴 축소 * /
높이 : 0;
오버플로 : 숨겨진;
/ * 후디니 감정 * /
전이 : 높이 1;
}
탐색 리 : 호버>div {
높이 : 56px;
}

합산

이것은 확실히 시작 안내서입니다. CSS 전용 애니메이션을 사용하여 수행 할 수있는 다른 멋진 효과가 많이 있습니다..

이걸 전에 사용해 봤어? CSS 애니메이션을위한 또 다른 좋은 응용 프로그램을 생각할 수 있습니까? 의견을 사용하여 생각을 공유하십시오!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map