Pause & Loop CSS animációk várakozással! Élő
Sokat tehetsz a tiszta CSS animációval, de az animáció szüneteltetése és megszakítása nem lehetséges az aktuális W3 specifikációval.
De egy szabad eszközzel VÁRJON! Élő valójában hurkolt animációkat hoz létre a semmiből val vel egyéni késések minden hurok között. Ez egy hétköznapi feladatnak tűnhet, de sok fejlesztő számára fájdalompontot old meg.
Meg kell jegyezni, hogy van egy CSS tulajdonság animáció késleltetés melyik késlelteti a Rajt egy CSS animáció. Azonban nem befolyásolja az ismétlődő animációt mivel csak késlelteti a kiindulási pontot.
VÁRJON! Élő auto-kiszámítja hány szünetet kell elhelyezni az egyéni animációs kulcsképek között hozza létre a pontos szünet időtartamát a hurkok között kell. Ez kézzel történhet, de rendkívül meggyőző, nem is beszélve a szuper bosszantó.
Ez a webes alkalmazás bármilyen CSS3 animációs funkcióval dolgozhat, beleértve a forgásokat és az átalakításokat. Nem írsz semmilyen új CSS tulajdonságot, hanem inkább a kulcskeret funkció tetején készíteni szünetek a százalékok alapján (az 0% -tól 100% -ig) az animáción belül.
Nézze meg a kezdőlapot néhány példa a cselekvésben. Elég világos, hogy mit tehet, és a forráskód ott van, hogy saját munkájába másolja / beillesse.
Kérjük, vegye figyelembe ezt nem egy teljes értékű könyvtár. Ez egy generátor létrehozza a CSS kódot a repülés közben az animáció késleltetéséhez szükséges bármilyen.
Ha egy egyszerűbb megoldást szeretne a helyszínen kívül, akkor is töltse le a Sass mixint. Ez egy kicsit trükkös, mert Sass térképre van szükség, ezért meg kell értened, hogyan adhatsz hozzá egyéni tulajdonságokat, és helyesen írd meg a szintaxist.
Íme egy példa arra, hogyan hívja a mixint:
@include waitAnimate ((animációnév: animName, kulcsképek: (0: (átalakítás: skála (1), háttérszín: kék), 50: (átalakítás: skála (2), háttérszín: zöld), 100: (átalakítás : skála (3), háttérszín: piros)), időtartam: 2, waitTime: 1, időzítésFunkció: egyszerű, iterációszám: végtelen));
A Pro webes fejlesztőknek nem lehetnek problémái a kötelek megismerésében és újrafelhasználható keverékbe való beépítésében. De a kezdő fejlesztők küzdhetnek, hogy dolgozzanak, így a webes alkalmazás.
Ez mind forráskód ingyenesen elérhető a GitHubon ha helyi másolatot szeretne letölteni. De mivel ez egy ilyen furcsa funkció, ez nem valami, amit valószínűleg sok projektben szüksége lesz. Ezért a WAIT! Az animált webalkalmazásnak elégnek kell lennie ahhoz, hogy segítsen megoldani az egyszeri problémát nak,-nek hurkos animációk késleltetése tiszta CSS segítségével.
Ez egy igazán szórakoztató hack, ami szintén nagyon homályos a tervezéssel. De ez megmutatja, hogy mennyire lehetséges a CSS3 és egy kicsit találékonyság.
