Pop-up üzenetek segítségével css-animáció

Felugró üzenetek a CSS-animációk

Ma megmutatjuk, hogyan lehet létrehozni egy egyszerű felugró üzenetek segítségével CSS-animáció. Az ötlet az, hogy megmutassa egy értesítést vagy figyelmeztetést egy bizonyos ideig, majd eltüntetjük. Fogjuk használni egy kis kijelző mutatja, mennyi idő marad, amíg az ablakot el nem tűnik.

Particionálás egy nagyon egyszerű, ez egy közönséges div szöveggel belül, mivel ez tartalmazza a kiegészítő doboz kijelző:

Egy üzenet lesz osztályok tn-box és tn-box-szín-1. amelyet azonosítására különböző színekben.

Ezután meghatározzuk az ablak stílusok:

tn-box # 123;
szélessége. 360px;
helyzetbe. relatív;
árrés. 0 auto 20px auto;
padding. 25 képpont 15px;
text-align. bal oldalon;
border-radius. 5px;
box-árnyék.
0 1px 1px RGBA # 40; 0. 0. 0. 0.1 # 41;.
süllyesztés 1px 0 0 RGBA # 40; 255. 255. 255. 0,6 # 41; ;
fényelnyelés. 0;
kurzor. alapértelmezett;
kijelzőn. none;
# 125;

tn-box-szín- 1 # 123;
háttérben. # Ffe691;
határon. 1px szilárd # f6db7b;
# 125;

Mi meg az ablak display: none, és megkérem, nulla átláthatóságot.

A kijelző a következő stílusok:

tn-progress # 123;
szélessége. 0;
magasságot. 4px;
háttérben. RGBA # 40; 255. 255. 255. 0,3 # 41; ;
helyzetbe. abszolút;
alján. 5px;
maradt. 2%;
border-radius. 3px;
box-árnyék.
süllyesztés 0 1px 1px RGBA # 40; 0. 0. 0. 0,05 # 41;.
0 0 -1px RGBA # 40; 255. 255. 255. 0,6 # 41; ;
# 125;

Kezdetben a folyamatjelző sáv szélessége 0.

Ebben a példában, azt használja a gombot egy zászló, miután azt kell jelölni, hogy az animáció elindításához:

input .fire ellenőrzést. kockás

szakasz .tn-box # 123;
kijelzőn. blokk;
animáció. fadeOut 5s lineáris előre;
# 125;

input .fire ellenőrzést. kockás

szakasz .tn-box .tn folyamatban # 123;
animáció. runProgress 4s lineáris előre 0,5 s;
# 125;

Gomb megelőzi ezt a részt az üzenet blokkok és így tudom használni a generikus kapcsolódó stratéga (általános testvér kombinátor).

tn-box .tn-box-aktív # 123;
kijelzőn. blokk;
animáció. fadeOut 5s lineáris előre;
# 125;

tn-box .tn-box-aktív .tn folyamatban # 123;
animáció. runProgress 4s lineáris előre 0,5 s;
# 125;

ahol tn-box-aktív egy osztály, amely hozzá a div-be tn-box osztályban.

Animáció a doboz maga hozza létre az alábbiak szerint:

@keyframes fadeOut <
0% # 123; fényelnyelés. 0; # 125;
10% # 123; fényelnyelés. 1; # 125;
90% # 123; fényelnyelés. 1; átalakítani. translateY # 40; 0px # 41; ; # 125;
99% # 123; fényelnyelés. 0; átalakítani. translateY # 40; -30px # 41; ; # 125;
100% # 123; fényelnyelés. 0; # 125;
# 125;

Hívtam, hogy „fadeOut” tűnnek el, az ablak, mert fokozatosan elhalványul, és kissé felfelé mozog.

Animációt a mutató a következő:

@keyframes runProgress <
0% # 123; szélessége. 0%; háttérben. RGBA # 40; 255. 255. 255. 0,3 # 41; ; # 125;
100% # 123; szélessége. 96%; háttérben. RGBA # 40; 255. 255. 255. 1 # 41; ; # 125;
# 125;

Mi animálni a szélessége akár 96% (bal behúzás 2% volt, tehát azt akarjuk, hogy a behúzás 2% jobbra) és növekedése a fedettség RGBA.

Az animáció állapotjelző valamivel kevesebb, mint a hossza az animáció ablakban kezdjük meg később.

Megjegyzés: ha az egérmutató, azt hiszem, jó lenne, ha a szünet animáció. Ennek akkor van értelme, ha a felhasználó szeretné, hogy figyelmesen olvassa mi van írva az üzenetet. De, sajnos, úgy tűnik, hogy néhány hibát WebKit alapú böngésző. A Chrome (19.0.1084.56 Win) animáció elszakad, míg a Safari (5.1.5 Win) kapok egy baleset jelentést WebKit2WebProcess.exe. De jól működik a Firefox> 12,0.

Különben is, itt van, hogyan lehet ezt csinálni:

tn-box .tn-box-hoverpause: hover.
.tn-box .tn-box-hoverpause: hover .tn folyamatban # 123;
animáció-play-state. szünetel;
# 125;

És ennyi az egész! Remélem tetszett!