CSS3 애니메이션을 효과적으로 활용하는 방법 : 자습서, 샘플 코드 및 예

업데이트: 2013-08-28 / 기사 작성자: Rochester Oliveira

JS와 jQuery를 사용할 때 우리는 애니메이션을 완벽하게 제어 할 수 있고 멋진 효과를 낼 수 있지만 가격은 상당히 높습니다. 처리 시간, 브라우저 간 호환성 (예 : JS와 관련해서는 모바일 장치가 상당히 다릅니다.) 및 코드 복잡성 자체가 애니메이션 인터페이스를 만드는 동안 유의해야 할 점입니다.

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

의자, 메모장, 실제 브라우저 (IE 제외)를 들고 시작합시다.

워밍업

우리는 CSS 애니메이션을 사용할 때 몇 가지 장점과 단점을 가지고 있습니다. 당신이 상사 나 고객에게 그 물건을 팔 필요가 있다면, 이것은 당신이 명심해야하는 것입니다 :

  • 잠재적으로 더 빠릅니다. HTML5 구현과 같은 하드웨어 가속을 사용할 수 있기 때문입니다.
  • 모바일 장치에서 더 잘 작동하며 터치 이벤트를 추적하는 데 특정 코드가 필요하지 않습니다.
  • JS는 브라우저에 의해 해석되어야하며 브라우저를 깨뜨릴 가능성은 훨씬 더 큽니다. 따라서 CSS가 실패하면 JS가 자동으로 페이지 전체를 손상시킬 수 있습니다.
  • 그들에게는 꽤 좋은 브라우저 지원이 있습니다 (이 사이트는 특정 통계를 확인하는 데 도움이 될 것입니다 : http://caniuse.com/#search )

CSS3 애니메이션의 예

이 게시물의 내용을 시작하기 전에 순수 CSS로 작성된 멋진 애니메이션을 살펴 보겠습니다.

순수한 CSS 트위터 실패 고래

애니메이션 실패한 고래

 스티븐 데니스 (Steven Dennis) 이것을 실제로보십시오.

순수한 CSS 스크롤링 콜라 캔
CSS 3 애니메이션 예제 : Scrolling Coke Can

로마 코르테스 (Roman Cortes) 이것을 실제로보십시오.

순수 CSS 워킹 맨

CSS 3 애니메이션 예제: 걷는 사람

 앤드류 호이어 (Andrew Hoyer) 이것을 실제로보십시오.

손이 더러워지기

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

#test {background : red; } #test : 마우스 오버 {배경 : 녹색; } #test : 활성 {배경 : 파란색; } #test : target {background : black; }

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

  • 정상 상태 : 배경이 빨간색으로 표시됩니다.
  • 마우스를 올리면 마우스가 요소 영역에 들어가면 녹색 배경이 표시됩니다.
  • 활성 : 마우스 커서를 클릭하고 마우스 버튼을 계속 누르고 있으면 배경색이 파란색으로 바뀝니다.
  • 대상 : 현재 페이지의 URL에 #test가 있으면이 요소는 검은 색이됩니다.

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

활성화 비활성화

CSS 전환

CSS 전환은 초기 상태에서 최종 상태로 부드럽게 변경됩니다. 따라서 "전환"속성을 사용하여 영향을받는 시간과 각 속성 및 애니메이션이 어떻게되어야 하는지를 주 선택기에서 정의하게됩니다. 예를 보자.

.test {/ * 전환 속성 지속 시간 기능, * / 색상 : 파란색; transition : color 2s, font-size 2s ease-out; } .test : hover {color : red; }. 테스트 : 활성 {글꼴 크기 : 200 %; }

.test 요소를 가져 가면 색상이 파란색에서 빨간색으로 점차 변경됩니다 (멋진 팔레트 인 것 같습니다.). 요소를 클릭하면 글꼴 크기가 기본 글꼴 크기의 200 %까지 점차 커집니다.

애니메이션에 사용할 수있는 "시간"을 소비하는 방식 인 완화 기능으로 설정된 "전환 타이밍"속성도 있습니다. 가능한 값은 다음과 같습니다.

  • 선형 : 처음부터 끝까지 같은 속도
  • 편안하게 : 느린 시작
  • 편안함 : 느린 끝
  • 편안함 : 천천히 시작, 중간에서 빠르기, 느린 끝
  • 편한 자세 : 느린 시작, 느린 끝
  • 큐빅 베 지어 (a, b, c, d) : 사용자 지정 속도

3 차 베 지어 함수는 애니메이션 속도 X 기간의 수학적 곡선을 나타내는 4에서 0까지 다양한 1 숫자로 맞춤 애니메이션을 만듭니다.

브라우저의 호환성을 높이려면 다음과 같이 오페라, 파이어 폭스 및 웹킷에 대한 공급 업체 접두사를 사용하는 것이 좋습니다.

div {width : 400px; -o-transition : 폭 2s; -moz-transition : 너비 2s; -webkit-transition : 폭 2s; 전환 : 너비 2s; }

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

body {font-size : 1em; } @ 미디어 화면 및 (최대 너비 : 800px) {body {글꼴 크기 : 0.8em; }} @media 화면 및 (최대 너비 : 400px) {body {글꼴 크기 : 0.7em; }}

여기서 브라우저 너비를 늘리면 글꼴 크기가 갑자기 변경됩니다. 이 코드는 이런 일이 일어나지 않도록하여 훨씬 부드럽게 전환됩니다.

body {-o-transition : font-size .5s linear; -moz-transition : font-size .5s linear; -webkit-transition : font-size .5s linear; 전환 : font-size .5s linear; }

너비, 색상, 패딩, 메뉴 표시를 변경하려는 경우 세로 / 가로 크기 나 디스플레이 크기가 다른 경우에도이 옵션을 사용할 수 있습니다.

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

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

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

/ * 각 벤더에 대해 동일한 코드 * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * animation name * / @keyframe my-animation {/ * 프레임 선택자 * / 0 % {/ * 프레임 스타일 * / 왼쪽 : 0px; Top : 0px; } 25 % {왼쪽 : 200px; Top : 0px; } 50 % {왼쪽 : 200px; Top : 200px; } 75 % {왼쪽 : 0px; Top : 200px; } 100 % {왼쪽 : 0px; Top : 0px; }}

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

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

이를 적용하기 위해 우리는 animation 속성을 사용할 것이고 7 하위 속성을 가질 것입니다 :

  • 이름 : 고유 식별자
  • 소요 시간 : 0 %에서 100 %까지 소요되는 시간
  • 타이밍 기능 : 전환 타이밍 기능과 거의 같습니다.
  • 지연 : 0 % 시작하는 데 얼마나 오래 걸릴까요?
  • 반복 횟수 : 반복 횟수 (무한 루프의 경우 "무한")
  • 방향 : 정상 또는 대체 (역방향)
  • 재생 상태 : 애니메이션이 실행 중이거나 일시 중지 된 경우

이렇게하면 페이지의 타겟 인 #test 요소에 애니메이션이 적용됩니다.

#test : target {/ * 애니메이션 이름 | 기간 | 타이밍 기능 | 지연 | 반복 횟수 | 방향 | play-state * / animation : my-animation 10s linear 0s 무한 정상 실행; }

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

CSS 전용 아코디언

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

탭 1 텍스트 1 탭 1 텍스트 1 탭 2 텍스트 2

그러면 패널과 각 패널을 트리거하는 링크가 만들어집니다. 마법의 발생 장소는 다음과 같습니다.

/ * 아코디언 안에있는 div * / .accordion div {/ *는 기본적으로 숨겨져 있습니다. * / height : 0; 오버 플로우 : 숨김; / * 검은 마법 * / 전환 : 높이 1s; } / * 언급 된 div가 타겟 일 때 * / .accordion div : target {/ * height : auto는 작동하지 않지만 괜찮습니다. * / height : 80px; }

아주 간단 하죠? 그리고 JS를 사용하여 평생을 보내셨습니까? :)

서브 메뉴가있는 CSS 전용 메뉴

그리고 이것은 다소 단순한 응용 프로그램입니다. 사이트에는 네비게이션 메뉴가 있으며, 종종 하위 메뉴를 사용해야합니다. 항목을 표시하거나 숨기는 가장 좋은 방법은 jQuery를 사용하는 것입니다. 이 코드를 테스트 한 후에 다시 생각해보십시오.

항목 1 항목 1 항목 11 항목 1.1 항목 12 항목 1.2

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

a {/ * 링크를 좀 더 좋게 만들기 * / display : block; 패딩 : 4px; } nav {text-align : center; } / * 모든 메뉴 (기본 메뉴 포함) * / nav ul {display : inline-block; 목록 스타일 : 없음; } nav> ul> li {/ * 가로 항목 (세로도 잘 작동 함) * / float : left; } nav li div {/ * 하위 메뉴 축소 * / 높이 : 0; 오버플로 : 숨김; / * Houdini 감정 * / 전환 : 높이 1s; } nav li : hover> div {높이 : 56px; }

합산

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

그럼, 전에 이걸 사용 했나요? CSS 애니메이션에 대한 또 다른 좋은 응용 프로그램을 생각해 볼 수 있습니까? 댓글을 사용하여 의견을 공유하십시오!

로체스터 올리베이라에 대하여

나는 웹 디자이너이자 기업가 인 Itajubá (MG), Brasil입니다. 나는 모호한 주제에 대해 쓰고 멋진 것들을하는 것을 좋아합니다.