Shift.css로 완전 애니메이션 위젯 만들기

웹 애니메이션 ~을 제공합니다. 사람들의 관심을 사로 잡다. 과 그들을 더 이끌어 라. 웹 사이트에 넣으십시오. 거기에 많은 도구가 있습니다. 무료 애니메이션 제작 그러나 Shift.css 무리에서 가장 새로운 것 중 하나이다..

그것은 무료 오픈 소스 프레임 워크 창조를 위해 만든 모든 컨테이너 내의 동적 애니메이션. 그리고이 애니메이션들 하나의 시퀀스에 잠겨 있지 않다.. 당신은 실제로 사용자 정의 애니메이션을 빌드 할 수 있습니다. 각 요소 블록에서 특정 순서대로.

그만큼 데모 페이지 이동 말로 설명 할 수있는 것보다 훨씬 잘 보여줄 수 있어요..

한가지주의 할 점은 컨테이너 내부의 각 요소는 분리 된 HTML 요소. SVG인지 이미지인지에 관계없이 모든 것을 애니메이션으로 만들 수 있습니다. 나만의 애니메이션 효과 만들기.

라이브러리에는 두 개의 파일, a .CSS 과 .js 라이브러리, 둘 다 있어야합니다. 문서 헤드에 추가.

이 프로젝트에 대한 GitHub 저장소를 찾을 수 없으므로 파일을 직접 다운로드하십시오. Shift.css 웹 사이트에서.

다음 단계는 컨테이너 요소 정의 일부 내용. 클래스 이름은 중요하므로 모든 애니메이션 요소는 수업을 듣다. .쉬프트 요소 적용된.

이 수업과 함께 HTML5 데이터 속성 추가 애니메이션의 작동 방식을 정의합니다. 지금은 세 개 밖에 없지만 전체 애니메이션 효과를 사용자 지정하기에 충분해야합니다..

1. 데이터 - 애니메이션: 애니메이션의 이름
2. 데이터 지연: 애니메이션 시작 전 총 지연 시간 (초)
3. 데이터 기간: 애니메이션의 총 길이 (초)

애니메이션 이름은 미리 정의 된 애니메이션 시프트 라이브러리 용으로 생성되었습니다. 지금 당장있다. 선택할 수있는 15 개의 애니메이션 이름. Shift.css 홈페이지 맨 아래에 목록이 표시됩니다..

다만 복사 붙여 넣기 네가 원하는대로 애니메이션 이름 설정에 넣기 너는 잘 가야 해! 예를 들어 나가는 페이드 애니메이션을 사용하려면 데이터 애니메이션 = "shift_exitFade" 데이터 요소로서 모든 요소가 그런 방식으로 애니메이션을 적용해야합니다. 쉬워요.

개발자가 배치와 기능을 훨씬 더 많이 제어 할 수 있기 때문에이 라이브러리에 JavaScript가 추가 옵션으로 제공되기를 바랍니다. 그러나 간단한 (그리고 무료) 애니메이션 프레임 워크를 위해 나는 불평 할 수 없다..

Shift.css는 완벽합니다. 새로운 개발자 누가 만들고 싶은가? 보다 복잡한 애니메이션 스타일 처음부터 장황한 코드를 작성하지 않고.