WAIT가있는 CSS 애니메이션 일시 중지 및 반복! 생명 있는

순수한 CSS 애니메이션으로 할 수있는 일은 많지만 애니메이션 일시 중지 및 반복이 불가능합니다. 현재 W3 사양.

그러나 같은 무료 도구 기다림! 생명 있는 너는 실제로 처음부터 반복 애니메이션 만들기 와 맞춤 지연 각 루프 사이. 이것은 평범한 작업처럼 보일 수 있지만 많은 개발자들에게 고통의 지점을 해결합니다..

CSS 속성이 있습니다. 애니메이션 지연 어느 지연시키다 스타트 CSS 애니메이션. 그러나 그것 반복되는 애니메이션에는 영향을 미치지 않습니다. 출발점 만 지연시키기 때문에.

기다림! 생명 있는 자동 계산 맞춤 애니메이션 키 프레임 안에 몇 개의 일시 중지를 배치해야하는지 정확한 일시 중지 기간 만들기 당신은 루프 사이에 필요합니다. 이것은 손으로 할 수 있지만 그것은 매우 convolved이야, 슈퍼 짜증나 말할 것도없고.

이 웹 앱은 CSS3 애니메이션 기능으로 작업, 회전 및 변환을 포함하여. 새로운 CSS 속성을 쓰지 않고 오히려 키 프레임 기능 위에 구축 만들다 백분율을 기준으로 일시 중지 (0 %에서 100 %까지) 애니메이션 내부.

보시려면 홈 페이지를 확인하십시오. 실행중인 몇 가지 예. 여러분이 할 수있는 일이 무엇인지, 그리고 소스 코드가 직접 복사하여 자신의 작업에 붙여 넣을 수 있다는 것이 확실합니다..

유의하십시오. 본격적인 도서관이 아니다.. 그것은 발전기입니다. 즉시 CSS 코드를 생성합니다. 애니메이션 지연에 필요한 모든 것을 기반으로합니다..

간단한 솔루션을 원할 경우 오프 사이트로 전환 할 수 있습니다. Sass mixin을 다운로드하십시오.. 조금 까다 롭습니다. 왜냐하면 Sass지도가 필요합니다., 따라서 사용자 정의 속성을 추가하고 구문을 올바르게 작성하는 방법을 이해해야합니다..

어떻게하면 좋을지에 대한 예가 있습니다. 믹스 인에게 전화하다.:

 @include waitAnimate (animationName : animName, keyframes : (0 :( 변형 : 배율 (1), 배경색 : 파랑), 50 : (변형 : 배율 (2), 배경색 : 녹색), : scale (3), background-color : red)), duration : 2, waitTime : 1, timingFunction : ease, iterationCount : 무한)); 

프로 웹 개발자는 로프를 배우고 이것을 재사용 가능한 믹스 인으로 만드는 데 문제가 없어야합니다. 그러나 초보자 개발자가 작동하도록 고심하는 경우가 있으므로 웹 앱.

이 모든 것 소스 코드 무료로 제공됩니다. GitHub에서 로컬로 복사본을 다운로드하려는 경우 그러나 이것은 이상한 기능이기 때문에 많은 프로젝트에서 필요할 것입니다. 그래서 기다리는 이유입니다! 애니메이션 웹 앱은 당신을 도울 정도로 충분해야합니다. 일회성 문제를 해결하다 의 순수한 CSS로 반복 된 애니메이션 지연.

디자인 상으로는 꽤 애매한 재미있는 해킹입니다. 그러나 CSS3와 독창성이 얼마나되는지 보여주는 것입니다..