Изскачащи съобщения, използвайки CSS-анимация

Днес ще ви покажем как да се създаде проста изскачащи съобщения, използвайки CSS-анимация. Идеята е да се покаже известие или предупреждение за определен период от време и след това да го изчезнат. Ние ще използваме малък индикатор, който показва колко време остава до изчезва през прозореца.

Разделянето е много проста, това е един обикновен Разделение с текст вътре, тъй като той ще съдържа допълнителен прозорец за показване:

каре за съобщение ще бъде класове TN-кутия и TN-бокс-цвят-1. който ще се използва за идентифициране на различни цветове.

След това ние определяме стилове на прозорците:

TN-кутия # 123;
ширина. 360 пиксела;
позиция. относителна;
марж. 0 авто 20px автомобил;
уплътнение. 25 пкс 15px;
текст подравняване. ляв;
граничен радиус. 5px;
кутия-сянка.
0 1px 1px RGBA # 40; 0. 0. 0. 0,1 # 41.
вмъкнати 1px 0 0 RGBA # 40; 255. 255. 255. 0,6 # 41; ;
непрозрачност. 0;
курсора. по подразбиране;
дисплея. няма;
# 125;

TN-бокс-color- 1 # 123;
фон. # Ffe691;
граница. 1px твърдо вещество # f6db7b;
# 125;

Ние поставяме витрина: Няма и да го помоли нула прозрачност.

Индикаторът ще има следните стилове:

TN-напредък # 123;
ширина. 0;
височина. 4 пкс;
фон. RGBA # 40; 255. 255. 255. 0,3 # 41; ;
позиция. абсолютна;
дъното. 5px;
наляво. 2%;
граничен радиус. 3px;
кутия-сянка.
вмъкнати 0 1px 1px RGBA # 40; 0. 0. 0. 0,05 # 41.
0 0 -1px RGBA # 40; 255. 255. 255. 0,6 # 41; ;
# 125;

Първоначално лентата за напредъка ще има ширина 0.

В този пример, аз използвайте бутона със знаме, след като тя ще бъде отбелязана за да започне анимацията:

вход .fire проверка. Проверих

раздел .tn кутия # 123;
дисплея. блок;
анимация. fadeOut 5s линейни препраща;
# 125;

вход .fire проверка. Проверих

раздел .tn кутия .tn-напредък # 123;
анимация. runProgress 4s линейни напред 0.5s;
# 125;

Бутон предшества секцията с блоковете за съобщения и за да мога да използвам родово свързаната стратег (общо брат Combinator).

TN-кутия .tn кутия активно # 123;
дисплея. блок;
анимация. fadeOut 5s линейни препраща;
# 125;

TN-кутия .tn кутия-активен .tn-напредък # 123;
анимация. runProgress 4s линейни напред 0.5s;
# 125;

където TN-бокс-активен е един клас, които можете да добавите към DIV-ин с TN-бокс клас.

Анимация за кутията самата е създаден, както следва:

@keyframes fadeOut <
0% # 123; непрозрачност. 0; # 125;
10% # 123; непрозрачност. 1; # 125;
90% # 123; непрозрачност. 1; трансформира. translateY # 40; 0px # 41; ; # 125;
99% # 123; непрозрачност. 0; трансформира. translateY # 40; -30px # 41; ; # 125;
100% # 123; непрозрачност. 0; # 125;
# 125;

Нарекох го "fadeOut", изчезва, през прозореца, тъй като постепенно избледнява и се движи малко по-нагоре.

Анимация за показателя е както следва:

@keyframes runProgress <
0% # 123; ширина. 0%; фон. RGBA # 40; 255. 255. 255. 0,3 # 41; ; # 125;
100% # 123; ширина. 96%; фон. RGBA # 40; 255. 255. 255. 1 # 41; ; # 125;
# 125;

Ние анимирате ширината на до 96% (вляво отстъп е 2%, така че ние искаме да се установи като отстъпи 2% вдясно) и увеличението на RGBA на непрозрачност.

Лентата за анимация напредък ще бъде малко по-малка от дължината на прозореца на анимация, какъвто го започнат по-късно.

Забележка: когато курсора на мишката, мисля, че би било добре, ако пауза в анимация. Това има смисъл, ако потребителят иска да прочетете внимателно това, което е написано в съобщението. Но, за съжаление, изглежда, че има някакъв проблем с WebKit-базиран браузър. В Chrome (19.0.1084.56 на Win) анимационни паузи, докато в Safari (5.1.5 Win) да получа сигнал за срив в WebKit2WebProcess.exe. Но тя работи добре в Firefox> 12.0.

Както и да е, тук е как можете да направите това:

TN-кутия .tn кутия-hoverpause: висене.
.TN-кутия .tn кутия-hoverpause: мишката .tn-напредък # 123;
анимация игра състояние. замълча;
# 125;

И това е всичко! Надявам се да ви радва!