Спливаючі повідомлення із застосуванням CSS-анімації
Сьогодні ми покажемо вам, як створити прості спливаючі повідомлення з використанням CSS-анімації. Ідея полягає в тому, щоб показати повідомлення або попередження на певний час, а потім змусити його зникнути. Ми будемо використовувати невеликий індикатор, щоб показати, скільки часу залишилося до того моменту, як вікно зникне.
Розмітка буде дуже проста, це буде звичайний div з повідомленням всередині, також він буде містити додатковий блок для індикатора:
Ваші налаштування були успішно збережені!
Вікно повідомлення буде мати класи tn-box і tn-box-color-1. який буде використовуватися для визначення різних кольорів.
Потім ми визначимо стилі вікна:
tn-box # 123;
width. 360px;
position. relative;
margin. 0 auto 20px auto;
padding. 25px 15px;
text-align. left;
border-radius. 5px;
box-shadow.
0 1px 1px rgba # 40; 0. 0. 0. 0.1 # 41 ;.
inset 0 1px 0 rgba # 40; 255. 255. 255. 0.6 # 41; ;
opacity. 0;
cursor. default;
display. none;
# 125;
tn-box-color- 1 # 123;
background. # Ffe691;
border. 1px solid # f6db7b;
# 125;
Ми встановимо для вікна властивість display: none і задамо йому нульову прозорість.
Індикатор буде мати наступні стилі:
tn-progress # 123;
width. 0;
height. 4px;
background. rgba # 40; 255. 255. 255. 0.3 # 41; ;
position. absolute;
bottom. 5px;
left. 2%;
border-radius. 3px;
box-shadow.
inset 0 1px 1px rgba # 40; 0. 0. 0. 0.05 # 41 ;.
0 -1px 0 rgba # 40; 255. 255. 255. 0.6 # 41; ;
# 125;
Спочатку, прогрес-бар матиме ширину 0.
У цьому прикладі я використовую кнопку з прапорцем, після того як він буде відзначений, почнеться анімація:
input .fire-check. checked
section .tn-box # 123;
display. block;
animation. fadeOut 5s linear forwards;
# 125;
input .fire-check. checked
section .tn-box .tn-progress # 123;
animation. runProgress 4s linear forwards 0.5s;
# 125;
Кнопці передує секція з блоками повідомлень і тому я можу використовувати узагальнений споріднений комбінатор (general sibling combinator).
tn-box .tn-box-active # 123;
display. block;
animation. fadeOut 5s linear forwards;
# 125;
tn-box .tn-box-active .tn-progress # 123;
animation. runProgress 4s linear forwards 0.5s;
# 125;
де tn-box-active є класом, який ви додаєте до div-у з класом tn-box.
Анімація для самого блоку створюється наступним чином:
@keyframes fadeOut <
0% # 123; opacity. 0; # 125;
10% # 123; opacity. 1; # 125;
90% # 123; opacity. 1; transform. translateY # 40; 0px # 41; ; # 125;
99% # 123; opacity. 0; transform. translateY # 40; -30px # 41; ; # 125;
100% # 123; opacity. 0; # 125;
# 125;
Я назвав її "fadeOut", зникаючи, вікно як би поступово згасає і трохи переміщається вгору.
Анімація для індикатора виглядає наступним чином:
@keyframes runProgress <
0% # 123; width. 0%; background. rgba # 40; 255. 255. 255. 0.3 # 41; ; # 125;
100% # 123; width. 96%; background. 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-box .tn-box-hoverpause: hover.
.tn-box .tn-box-hoverpause: hover .tn-progress # 123;
animation-play-state. paused;
# 125;
І це все! Я сподіваюся, вам сподобалося!