Всплывающие уведомления – CSS анимация

Karina | 04.12.2014

В данном уроке мы рассмотрим способ создания маленьких всплывающих сообщений с использованием CSS. Такие окошки могут пригодиться, когда надо красиво и ненавязчиво уведомить посетителя о результате каких-то действий.

Вы можете взглянуть на демо (работает только в тех браузерах, которые поддерживают CSS3 Animations), а также скачать архив с файлами для дальнейшего изучения.

Демо Загрузить архив RAR

HTML

На странице находятся три блока <div> с классами notif и notif-color-1, notif-color-2, notif-color-3 – для каждого окошка трех цветов. В блоке указываем содержание (текст сообщения) и добавляем внутрь еще один <div> для прогресс-бара (класс notif-progress):

<div class="notif notif-color-1">
<p>Данные сохранены!</p>
<div class="notif-progress"></div>
</div>

<div class="notif notif-color-2">
<p>Комментарий опубликован.</p>
<div class="notif-progress"></div>
</div>

<div class="notif notif-color-3">
<p>У Вас 1 новое сообщение.<p>
<div class="notif-progress"></div>
</div>

CSS

Так выглядит стиль для всплывающих уведомлений, текста сообщений, иконки и прогресс-бара:

.notif {
 width: 280px;
 position: relative;
 margin: 0 auto 25px auto;
 padding: 30px 20px;
 text-align: left;
 border-radius: 12px;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0); 
 cursor: default;
 display: none;
}

.notif p {
 text-align: left;
 font-weight: bold;
 font-size: 16px;
 margin: 0;
}

.notif p:before {
 text-align: center;
 border: 3px solid rgba(255, 255, 255, 1);
 margin-top: -18px;
 top: 50%;
 right: 25px;
 width: 30px;
 content: '!';
 font-size: 30px;
 color: rgba(255, 255, 255, 1);
 position: absolute;
 height: 30px;
 line-height: 30px;
 border-radius: 50%;
}

.notif-progress {
 width: 0;
 height: 10px;
 background: rgba(255,255,255,0.5);
 position: absolute;
 bottom: 5px;
 left: 3%;
 border-radius: 12px;
}

 
Установим цвета для каждого окошка:

.notif-color-1 {
 background: #F89406;
}

.notif-color-1 p {
 color: #FFF;
}

.notif-color-2 {
 background: #59ABE3;
}

.notif-color-2 p {
 color: #FFF;
}

.notif-color-3 {
 background: #00B16A;
}

.notif-color-3 p {
 color: #FFF;
}

 
При нажатии на кнопку look-btn будет начинаться анимация:

input.look-btn:checked ~ section .notif {
 display: block;
 -webkit-animation: fadeOut 3s linear forwards;
 -moz-animation: fadeOut 3s linear forwards;
 -o-animation: fadeOut 3s linear forwards;
 -ms-animation: fadeOut 3s linear forwards;
 animation: fadeOut 3s linear forwards;
}

input.look-btn:checked ~ section .notif .notif-progress {
 -webkit-animation: runProgress 2s linear forwards 0.7s;
 -moz-animation: runProgress 2s linear forwards 0.7s;
 -o-animation: runProgress 2s linear forwards 0.7s;
 -ms-animation: runProgress 2s linear forwards 0.7s;
 animation: runProgress 2s linear forwards 0.7s;
}

 
Эффект затухания выглядит следующим образом:

fadeOut {
 0% { opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; -webkit-transform: translateY(0px);}
 99% { opacity: 0; -webkit-transform: translateY(-25px);}
 100% { opacity: 0; }
}

 
…и анимация для прогресс-бара:

runProgress {
 0%{ width: 0%; }
 100%{ width: 94%; }
}

 
Вот таким довольно несложным способом можно создать аккуратные всплывающие сообщения.
Творческих успехов вам!