Pozastavení a smyčka CSS animace s WAIT! Animovat

Je toho hodně, co můžete udělat s čistou animací CSS, ale pozastavení a opakování animace není možné s aktuálním W3 spec.

Ale s volným nástrojem POČKEJTE! Animovat můžete vlastně vytvořte smyčkové animace od nuly s vlastní zpoždění mezi každou smyčkou. To se může zdát jako světský úkol, ale řeší bod bolesti pro mnoho vývojářů.

Je třeba poznamenat, že je volána vlastnost CSS zpoždění animace který zpožďuje Start CSS animace. Nicméně neovlivní opakovanou animaci protože pouze zpožďuje výchozí bod.

POČKEJTE! Animovat automatické výpočty kolik pauz je třeba umístit do vlastních klíčových snímků animace vytvořit přesnou délku pauzy budete potřebovat mezi smyčkami. To by mohlo být provedeno ručně, ale je to velmi konvolvované, nemluvě o super otravné.

Tato webová aplikace může pracovat s libovolnou animací CSS3, včetně rotací a transformací. Nepíšete žádné nové vlastnosti CSS, ale spíše navazující na funkci klíčových snímků vytvořit pauzy založené na procentech (od 0% do 100%) uvnitř animace.

Podívejte se na domovskou stránku několik příkladů v akci. Je to docela jasné, co můžete udělat, a zdrojový kód je tam kopírovat / vkládat do své vlastní práce.

Upozorňujeme, že toto je není plnohodnotnou knihovnou. Je to generátor vytvoří váš CSS kód on-the-fly na základě toho, co potřebujete pro zpoždění animace.

Pokud chcete jednodušší řešení off-site pak můžete stáhnout Sass mixin. To je trochu složitější, protože vyžaduje mapu Sass, takže budete muset pochopit, jak přidat vlastní vlastnosti a správně napsat svou syntaxi.

Zde je příklad, jak byste to udělali zavolej mixin:

 @include waitAnimate ((animationName: animName, keyframes: (0: (transform: scale (1), barva pozadí: modrá), 50: (transformace: scale (2), barva pozadí: zelená), 100: (transformace : scale (3), background-color: red)), trvání: 2, waitTime: 1, timingFunction: easy, iterationCount: nekonečno)); 

Pro weboví vývojáři by neměli mít žádný problém učit se lana a budovat je do opakovaně použitelného mixinu. Ale začínající vývojáři se mohou snažit, aby to fungovalo, proto webová aplikace.

Tohle všechno zdrojový kód je k dispozici zdarma na GitHub chcete-li lokálně stáhnout kopii. Ale protože to je tak zvláštní rys, není to něco, co budete pravděpodobně potřebovat v mnoha projektech. To je důvod, proč WAIT! Animate web app by měl být více než dost, aby vám pomohl vyřešit jednorázový problém z odkládání smyčkových animací s čistým CSS.

Je to opravdu zábavné hack, který je také docela temný design. Ukázalo se však, jak moc je možné s CSS3 a malou vynalézavostí.