Паузирај & Лооп ЦСС анимације са ВАИТ! Анимирај

Много тога можете урадити са чистом ЦСС анимацијом, али паузирање и петљање анимације није могуће са тренутном спецификацијом В3.

Али са бесплатним алатом ЧЕКАТИ! Анимирај можете заправо креирајте анимације од нуле са цустом делаис између сваке петље. Ово може изгледати као свакодневни задатак, али рјешава болну точку за многе програмере.

Треба напоменути да се зове ЦСС својство анимација-кашњење која кашњења почетак ЦСС анимације. Али то не утиче на понављајућу анимацију јер само одлаже полазну тачку.

ЧЕКАТИ! Анимирај ауто-цалцулатес колико паузе треба поставити унутар прилагођених кључних кадрова анимације створите тачно трајање паузе требате између петљи. Ово се може урадити ручно, али је изузетно заплетено, да не спомињемо супер неугодно.

Ова веб апликација може ради са било којом ЦСС3 анимацијом, укључујући ротације и трансформације. Не пишете нове ЦСС особине већ радије зграда на врху функције кључних кадрова створити пауза заснована на процентима (од 0% до 100%) унутар анимације.

Погледајте почетну страницу да бисте је видели неколико примјера у акцији. Прилично је јасно шта можете да урадите, а изворни код је ту да копирате / налепите у свој рад.

Имајте на уму да је ово није потпуно развијена библиотека. То је генератор креира ваш ЦСС код он-тхе-фли на основу свега што вам је потребно за кашњење анимације.

Ако желите једноставније рјешење изван мјеста, онда можете Сасс микин. Ово је мало теже јер то захтева Сасс мапу, тако да ћете морати да разумете како да додате прилагођена својства и да исправно напишете синтаксу.

Ево примера како бисте позови микин:

 @инцлуде ваитАнимате ((аниматионНаме: анимНаме, кеифрамес: (0: (трансформација: скала (1), позадинска боја: плава), 50: (трансформација: скала (2), позадинска боја: зелена), 100: (трансформација : сцале (3), бацкгроунд-цолор: ред)), трајање: 2, време чекања: 1, тимингФунцтион: еаси, итератионЦоунт: инфините)); 

Про веб програмери не би требало да имају проблема у учењу конопаца и изградњи у вишекратну употребу. Међутим, почетници могу да се муче да би могли да функционишу, па тако и веб апликација.

Све ово изворни код доступан је бесплатно он ГитХуб ако желите да преузмете копију локално. Али пошто је ово тако чудна карактеристика, то није нешто што ће вам вероватно бити потребно у многим пројектима. Зато ВАИТ! Анимација веб апликације треба да буде више него довољна да вам помогне решити једнократни проблем оф одгађање петље анимација са чистим ЦСС-ом.

То је стварно забаван хацк који је такође прилично нејасан по дизајну. Али то показује колико је могуће са ЦСС3 и мало генијалности.