CSS 애니메이션 도구, 프레임워크 및 튜토리얼-CSS 튜토리얼-php.cn

CSS 애니메이션 도구, 프레임워크 및 튜토리얼

巴扎黑

풀어 주다： 2017-03-29 11:16:30

원래의

1511명이 탐색했습니다.

이 글에서는 CSS 애니메이션 사용의 이점이나 JS 애니메이션이 CSS 애니메이션보다 빠른지 여부에 대해 논의하지 않고 일부 CSS 도구, 프레임워크 및 튜토리얼을 공유합니다. CSS 애니메이션 학습의 고통을 덜어주고 시간을 절약하는 데 도움이 될 것입니다.

CSS 애니메이션 도구 및 프레임워크

1. 애니메이트.css

Animate.css는 스크롤 막대 및 홈페이지와 같은 웹 프로젝트에서 사용할 수 있는 크로스 브라우저 CSS 애니메이션 모음입니다.

2. 스타일리

Stylie는 자신만의 애니메이션 컬렉션을 구성하고 생성하는 데 사용할 수 있는 시각적 CSS3 애니메이션 도구입니다.

3.animo.js

animo.js는 강력한 CSS 애니메이션 관리 도구입니다. 애니메이션을 순서대로 쉽게 쌓거나, 어떤 이벤트에서든 언제든지 재생할 애니메이션을 지정할 수 있습니다.

4. 애니마

경량(gzip 압축 시 5k) Anima를 사용하면 여러 개체에 동시에 애니메이션을 적용할 수 있으며, 각 항목은 질량과 밀도를 통해 실제 개체를 시뮬레이션할 수 있습니다. 동시에 CSS 변환 및 3D 변환을 활용하여 JavaScript로 애니메이션을 만들 수 있습니다.

5. 로켓

Rocket은 웹 애니메이션을 만들기 위한 간단한 도구입니다.

6. 애니메이트 플러스

Animate Plus는 동적 CSS 속성과 SVG 속성을 만드는 데 도움이 되는 고성능 JavaScript 라이브러리입니다.

7. 화요일

화요일은 멋진 CSS 애니메이션 라이브러리입니다.

8. Shift.css

Shift.css는 시간 제한이 있는 CSS 애니메이션을 만들기 위한 간단한 반응형 프레임워크입니다.

9. 모션 UI

Motion UI는 유연한 CSS 전환 및 애니메이션을 만들기 위한 Sass 라이브러리입니다.

10. CSS 쉐이크

CSS Shake는 CSS3에서 구현된 애니메이션 효과 세트로, 페이지의 DOM 요소가 다양한 흔들림 효과를 얻을 수 있도록 합니다.

11. 매직 애니메이션

Magic Animations는 독특한 CSS3 애니메이션 효과를 갖춘 작은 라이브러리입니다.

12. Hover.css

Hover.css는 CSS3 기반 마우스 호버 효과 애니메이션 라이브러리입니다.

13. 샤프란

Saffron은 CSS3 애니메이션 및 전환을 위한 간단한 Sass 믹스인 라이브러리입니다.

14. CSSynth

CSSynth는 온라인으로 애니메이션을 실행하는 애플리케이션입니다.

15. 중지

Caesar는 프로젝트에서 쉽게 사용할 수 있는 간단한 CSS 완화 애니메이션 도구입니다.

16. 애니메이션

잠깐만요! Animate는 CSS 애니메이션의 키프레임 비율을 계산하는 도구입니다.

17. 여행

Trip은 CSS를 사용하여 3D 모양을 만들 수 있는 웹 기반 편집기입니다. 동시에 브라우저 간 호환이 가능합니다.

18. Morf.js

Morf.js는 사용자 정의 여유 기능을 사용하여 하드웨어 가속 CSS3 전환 효과를 생성하는 데 도움이 되는 일련의 JavaScript 메서드를 제공합니다.

19. CSS3 키프레임 애니메이션 생성기

이름에서 알 수 있듯이 CSS3 키프레임 애니메이션 생성기는 CSS3 키프레임 애니메이션을 만드는 데 도움이 되는 온라인 도구입니다.

20.Effeckt.css

Efeckt.css는 수많은 애니메이션 및 전환 효과를 제공하는 라이브러리입니다. 웹 프로젝트에서 편리하게 사용할 수 있도록 팝업 창, 버튼, 탐색, 목록 및 기타 특수 효과 애니메이션이 포함되어 있습니다.

21. CSS3 애니메이션 치트 시트

CSS3 애니메이션 치트 시트는 미리 만들어진 CSS3 애니메이션 세트를 제공합니다. 웹사이트에 스타일시트를 추가하고 사전 생성된 CSS3 클래스를 필요한 요소에 적용할 수 있습니다.

CSS 애니메이션 튜토리얼

초보자를 위한 CSS 애니메이션 소개
이 튜토리얼에서는 정사각형 요소를 원으로 변환하는 애니메이션 예제를 빠르게 만드는 방법을 보여줍니다.
CSS 전환, 변형 및 애니메이션 튜토리얼
이 사이트의 튜토리얼은 웹 프로젝트에서 CSS3의 전환, 변환 및 애니메이션을 사용하는 방법을 안내합니다. 튜토리얼도 비교적 간단하므로 배우기 위해 CSS3에 대한 고급 지식이 필요하지 않습니다.
CSS 애니메이션 사용
CSS 애니메이션에 대한 기본 튜토리얼입니다. CSS 애니메이션을 시작할 수 있는 곳을 찾고 있다면 이 튜토리얼이 적합합니다.
CSS 전환 사용
위의 튜토리얼과 마찬가지로 이 튜토리얼은 Mozilla 개발자 네트워크에서 제공되며 CSS 전환 사용 방법을 가르치기 위해 고안되었습니다.
네 가지 간단한 CSS3 애니메이션 튜토리얼
이 리소스는 4개의 CSS3 애니메이션 튜토리얼을 결합한 것입니다. CSS3 애니메이션의 네 가지 메서드인 scale(),translate(),rotate(),skew()를 사용하는 방법을 배울 수 있습니다.
CSS 의사 요소 애니메이션 및 전환 예제 튜토리얼
이 튜토리얼에서는 CSS 애니메이션 및 전환에서 의사 요소( :before 및 :after)를 사용할 수 있는 가능성을 보여줍니다.
CSS3 애니메이션을 사용하여 3D 막대 차트 만들기
이 고급 튜토리얼에서는 CSS3 애니메이션을 사용하여 3D 막대 차트를 만드는 방법을 보여줍니다.