Stylie - 무료 CSS 웹 애니메이션 빌더

CSS3 구문으로 고심하고 애니메이션을 만드는 간단한 방법 스타일 저장하는 훌륭한 도구입니다.

이것은 많은 무료 중 하나입니다. 코드 생성기 순수한 CSS 애니메이션 효과에 중점을 둡니다. Stylie는 무료이며 공개 소스이며 GitHub에서 호스팅되며 Rekapi라는 키 프레임 라이브러리를 기반으로합니다..

레카피 도서관 자바 스크립트 사용, 그래서 그것은 순수 CSS에 대한 대안입니다. 고맙게도 Stylie 웹 앱은 두 가지 방법을 모두 지원하므로 순수 CSS 또는 자바 스크립트로 내보내기 코드.

기본적으로 첫 번째 페이지에는 선형 애니메이션이 포함 된 연속 애니메이션 데모가로드됩니다. 이 작업을 편집하려면 기본 설정 ~ 안에 동작 탭 또는 키 프레임 탭.

키 프레임 목록에서 다음을 수행 할 수 있습니다. 새 키 프레임 추가, 총 기간을 편집하십시오., 과 애니메이션 스타일 변경, X / Y 축 기반 이동.

먼저, 이것은 보일 것이다. 매우 혼란스러운, 특히 이전에 키 프레임 애니메이션을 해 본 적이없는 경우에 특히 그렇습니다. 그러나이 응용 프로그램으로 더 많이 게임할수록 더 의미가 있습니다..

기본적으로, 당신은 다른 여유 옵션 엉망으로 만들기 쉽고 모두 맞춤 설정이 쉽습니다..

그만큼 모션 그래프 배우기가 훨씬 힘들지 만 애니메이션 이퀄라이저를 훨씬 더 잘 제어 할 수 있습니다. Stylie를 사용하면 사용자 지정 모션 효과 저장 과 이들을 재사용하다. 다른 애니메이션의 키 프레임 탭에서.

내가 한 가지에 대해 불평 할 수 있다면 웹 앱의 반응이 빠른 디자인 부족.

브라우저가 완전히 최대화 된 상태에서도 전체 13 인치 MacBook Pro 화면에 맞도록 전체 앱을 가져올 수 없었습니다. 페이지에 수직 스크롤 막대가없고 많은 옵션 (예 : 내 보낸 코드)이 발견되어 문제가 될 수 있습니다. 설정 창에서 더 낮게.

그러나이 사소한 성가심을 제외하고는, 제 큰 모니터에서 잘 작동했습니다. 그리고 수출의 질 웹에서 찾을 수있는 것과 다른 것 같습니다..

Stylie 앱을 살펴보고 작동 방식을 확인하고 옵션 중 일부를 사용해 보시기 바랍니다. 일단 애니메이션을 만들면 CSS 또는 자바 스크립트 내보내기 당신이 좋아하는 모든 프로젝트에 이것을 사용하십시오..

인터페이스 학습에 어려움이있는 경우 약 9 분의 길고 모든 주요 기능을 다루는이 간단한 자습서를 시청할 수도 있습니다.