Pause & Loop CSS animacijos su WAIT! Animuoti
Yra daug, ką galite padaryti su grynąja CSS animacija, bet animacijos pristabdymas ir kilimas neįmanoma su dabartine W3 specifikacija.
Bet kaip ir laisvas įrankis LAUKTI! Animuoti jūs iš tikrųjų galite sukurti nulio animacijas su pasirinktiniai vėlavimai tarp kiekvienos kilpos. Tai gali atrodyti metinė užduotis, tačiau daugeliui kūrėjų išsprendžia skausmo tašką.
Pažymėtina, kad yra vadinamas CSS turtas animacijos uždelsimas kuris vėluoja pradėti CSS animacija. Tačiau tai neturi įtakos kartojančiam animavimui kadangi tai tik vėluoja pradinį tašką.
LAUKTI! Animuoti automatiškai apskaičiuoja kiek pauzių reikia įdėti į pasirinktinius animacijos raktų rėmelius į sukurti tikslią pauzės trukmę reikia tarp kilpų. Tai gali būti padaryta ranka, bet tai labai įtikinama, jau nekalbant apie labai erzinančius.
Ši žiniatinklio programa gali dirbti su bet kuria CSS3 animacijos funkcija, įskaitant rotaciją ir transformacijas. Jūs nesate rašę jokių naujų CSS savybių, bet pastatas ant rakto rėmelių funkcijos sukurti pauzės pagal procentus (nuo 0% iki 100%) animacijos viduje.
Peržiūrėkite pagrindinį puslapį keli pavyzdžiai. Tai gana aišku, ką galite padaryti, o šaltinis yra teisus, kad galėtumėte nukopijuoti / įklijuoti į savo darbą.
Atkreipkite dėmesį, kad tai yra ne visavertė biblioteka. Tai generatorius sukuria jūsų CSS kodą skrydžio metu pagal tai, ko jums reikia animacijos uždelsimui.
Jei norite paprastesnio sprendimo už svetainės ribų, galite atsisiųsti Sass mixin. Tai šiek tiek sudėtingesnė, nes tam reikia „Sass“ žemėlapio, todėl turėsite suprasti, kaip pridėti priskirtas savybes ir tinkamai užrašyti savo sintaksę.
Štai pavyzdys, kaip jūs skambinkite „mixin“:
@include waitAnimate ((animacijos pavadinimas: animName, raktų rėmeliai: (0: (transformuoti: skalė (1), fono spalva: mėlyna), 50: (transformuoti: skalė (2), fono spalva: žalia), 100: (transformuoti : skalė (3), fono spalva: raudona)), trukmė: 2, waitTime: 1, timingFunction: easy, iterationCount: infinite));
Pro žiniatinklio kūrėjams neturėtų kilti problemų mokant lynus ir statant juos į daugkartinio naudojimo mišinį. Bet pradedantiesiems kūrėjams gali būti sunku jį gauti, taigi ir žiniatinklio programa.
Visą tai pirminis kodas galima nemokamai apie GitHub jei norite atsisiųsti kopiją vietoje. Bet kadangi tai yra tokia keista funkcija, tai nėra kažkas, ko jums tikriausiai reikės daugelyje projektų. Štai kodėl PALAUKITE! Animuoti žiniatinklio programa turėtų būti daugiau nei pakankamai, kad padėtų jums išspręsti vienkartinę problemą apie uždelstą animaciją su grynu CSS.
Tai tikrai įdomus įsilaužimas, kuris taip pat yra gana neaiškus pagal dizainą. Tačiau tai parodo, kiek galima su CSS3 ir šiek tiek išradingumu.
