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

  • 웹사이트 디자인
  • 업데이트 : 8 월 28, 2013

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 애니메이션을 활성화 및 비활성화 할 수 있습니다.

<a href='#test'> 활성화 </a> <a href='#'> 비활성화 </a>하십시오.

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 구조입니다.

<div class = "accordion"> <a href="#tab1"> 탭 1 </a> <div id = "tab1"> <p> TEXT 1 </ p> </ div> <a href = "# tab2 "> 탭 2 </a> <div id ="tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> 탭 3 </a> <div id =" tab3 "> <p> 텍스트 3 </ p> </ div> </ div>

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

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

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

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

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

<a href='#item1'> 항목 1 </a> <div> <ul> <li> <a href='#item11'> 항목 1.1 </a> </ li> <li> <a href='#item12'> 항목 1.2 </a> </ li> </ ul> </ div> <li> <a href='#item2'> 항목 2 </a> <div> <ul> <li> <a href='#item21'> 항목 2.1 </a> </ li> <li> <a href='#item22'> 항목 2.2 </a> </ li> </ ul> </ div> </ li> </ ul> </ nav>

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

a {/ * 링크를 조금 더 잘 만들도록 * / display : block; 패딩 : 4px; } nav {text-align : center; } / * 어떤 메뉴 (주 메뉴 포함) * / nav ul {display : inline-block; 목록 스타일 : 없음; } nav> ul> li {/ * 수평 항목 (수직도 잘 동작합니다) * / float : 왼쪽; } nav li div {/ * 모든 하위 메뉴 접기 * / height : 0; 오버 플로우 : 숨김; / * 후디니 감정 * / 전환 : 신장 1s; } nav li : 호버> div (높이 : 56px; }

합산

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

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

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

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