10 CSS3 애니메이션 도구 책갈피
사람들이 움직이는 것을보다 쉽게 인식하는 경향이 있으므로 스마트 애니메이션을 사용하면 사이트의 사용자 환경을 향상시킬 수 있습니다. 사용자가 신속하게 알아야하는 중요한 요소에 대한 관심 유도.
CSS3는 디자인에서 많은 흥미로운 것을 얻을 수있는 새로운 애니메이션 구문을 도입했습니다. 시원한 애니메이션을 제작하는 것은 때로는 복잡하고 시간 소모적 일 수 있습니다. 애니메이션 라이브러리 및 생성기를 훌륭하게 사용할 수있는 경우입니다..
CSS로 가능한 애니메이션을 확인하십시오 :
- 38 고무적인 CSS3 애니메이션 데모
- CSS로 만든 아름다운 텍스트 효과 15 개
- 30 멋진 CSS 애니메이션보기
- CSS3 애니메이션으로 바운스 효과를 만드는 법
이 글에서는 10 개의 훌륭한 도구를 통해보다 쉽고 빠르게 자신 만의 애니메이션을 만들 수 있습니다..
1. CSS3Gen CSS3 애니메이션 생성기
CSS3Gen 는 기본 애니메이션을 빠르게 생성 할 수있는 사용하기 쉬운 애니메이션 생성기를 제공합니다. 이 도구로 복잡한 미술 작품을 만들지는 않겠지 만 너무 번거롭지 않게 표준 애니메이션을 만들고 싶다면 훌륭한 선택입니다.
당신 코드로 손을 더럽힐 필요가 없다., 양식에서 속성을 설정할 수 있으므로 결과를 미리 본 다음 코드를 복사하여 자신의 CSS 파일에 붙여 넣기 만하면됩니다..
2. CSS 애니메이션
만약 너라면 더 복잡한 애니메이션이 필요하다., 너는 발견 할지도 모른다 CSS 애니메이션 유능한. 더 성숙한 UI를 제공하고, 속성을 조금 더 설정할 수 있으며 직관적 인 타임 라인을 사용하여 애니메이션을 따라하거나 중지하고 다시 시작할 수 있습니다..
예제 애니메이션도 있습니다. “되튐”, “떨림”, 과 “그네”, 생성기에로드하고 필요에 따라 코드를 수정할 수 있습니다..
3. Coveloping CSS Animation Generator
포장의 애니메이션 생성기가 아마도 최선의 선택 일 것이다. CSS3 애니메이션이 처음이라면, 어떻게 작동하는지 빨리 이해하고 싶습니다. 이 간단하면서도 강력한 도구를 사용하면 CSS3가 제공해야하는 다양한 유형의 애니메이션을 테스트하고 그 차이점을 쉽게 확인할 수 있습니다.
애니메이션 유형, 애니메이션 기능, 지속 시간 (초) 및 애니메이션이 무한 경우에만 4 개의 매개 변수를 설정하면됩니다. 준비가되면 생성 된 HTML 및 CSS 코드 만 가져와 잡아야합니다..
4. 매직 애니메이션
매직 애니메이션 멋진 CSS 라이브러리로 특수 효과가있는 애니메이션을 쉽게 배치 할 수 있습니다. 귀하의 사이트에. 예를 들어, 요소를 바깥쪽으로 또는 바깥쪽으로, 왼쪽 또는 오른쪽으로 열고, 돌아가거나, 아래로, 위로, 왼쪽으로, 오른쪽으로, 그리고 많은 다른 요소를 만들 수 있습니다.
코드를 다운로드하고 HTML 파일에 CSS 파일을 포함하고 다음과 같은 방식으로 jQuery를 사용하여 적절한 클래스를 추가하기 만하면됩니다.
$ ( '. yourdiv') .hover (function () $ (this) .addClass ( 'magictime puffIn'););
타이머의 설정을 변경하고 jQuery를 사용하여 애니메이션을 무한으로 만들 수도 있습니다 (자세한 내용은 readme 파일 참조).
5. Animate.css
Animate.css 당신에게 일련의 멋진 크로스 브라우저 CSS3 애니메이션. 애니메이션은 Attention Seekers, Bouncing Entrances, Bouncing Exit, Fading Entrances 및 기타 여러 그룹으로 나뉘어 있으므로 선택의 부족에 대해 진정으로 불평 할 수 없습니다..
Github에서 코드를 다운로드 한 다음 HTML 파일에 CSS 파일을 추가하고 애니메이션을 적용 할 HTML 요소에 관련 CSS 클래스를 추가하면됩니다..
6. Bounce.js
Bounce.js 편리한 자바 스크립트 라이브러리로 복잡한 애니메이션 제작. Bounce.js에는 애니메이션에 수동으로 이징, 지속 시간, 지연 및 수와 같은 다양한 구성 요소를 수동으로 추가하거나 바로 사용할 수있는 사전 설정을 선택한 다음 애니메이션을 재생할 수있는 성숙한 사용자 인터페이스가 있습니다. 필요한 경우 속성을 미세 조정합니다..
7. AniJS
애니 즈 디자인에 CSS3 애니메이션을 추가 할 수있는 supercool JavaScript 라이브러리입니다. 정교한 UI 구성 요소 만들기 아코디언, 모달, 슬라이딩 메뉴, 모바일 앱 알림, 스크롤 표시 등 다양한 기능을 제공합니다..
iOS 및 Android를 포함한 모든 최신 브라우저에서 작동하며 타사 라이브러리가 필요하지 않으며 AniCollection이라는 멋진 쇼케이스를 통해 라이브러리가 제공하는 다양한 효과를 쉽게 실험 할 수 있습니다..
8. 단일 요소 CSS 스피너
디자인을 향상시키고 자했던 적이 있습니까? 애니메이션 로딩 스피너? 대답이 '예'인 경우이 귀여운 CSS 회 전자 라이브러리가 훌륭한 선택 일 수 있습니다. 스피너 용 CSS 코드는 덜 작성되었습니다. 설정이 없으면 코드가 준비되었습니다. HTML 및 CSS 파일에만 삽입하면됩니다..
9. 주행 거리계
주행 거리계 훌륭한 도구 인 멋진 애니메이션 미터를 사이트에 배치하십시오.. 그것은 CSS와 자바 스크립트 라이브러리입니다. CSS 부분은 Sass로 쓰여졌 고, 다음과 같은 다양한 테마 중에서 선택할 수 있습니다. “디지털”, “기차역”, 과 “차”.
주행 거리계를 사용하려면 JavaScript 파일과 선택한 테마 파일을 HTML 페이지에 추가 한 다음 클래스 = "주행 거리계" 선택기를 애니메이션 측정기로 만들려는 요소에 추가합니다. 시각적으로 데이터를 표현하거나 “출시 예정” 더 눈길을 끄는 페이지.
10. Snabbt.js
Snabbt.js 이 애니메이션 라이브러리는 쉽게 물건을 옮길 수 있습니다.. 약간의 영감이 필요하다면 데모를보고이 스마트 애니메이션 도구를 사용하여 얻을 수있는 것을 확인하십시오. 아래 스크린 샷의 애니메이션주기 표는 Snabbt.js가 구현하기 쉬운 많은 가능성 중 하나 일뿐입니다.
이 라이브러리를 사용하려면 약간의 JavaScript를 작성해야하지만 그 결과는 상당히 훌륭하므로 문제가 될만한 가치가 있습니다..
