Временные оповещения с CSS-анимациями

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


Вы наверняка уже видели подобное. Например, мы наткнулись на подобный эффект на сайте buysellads.com, где временные оповещения используются для подтверждения сохранения изменений.

Что касается разметки, то здесь мы просто воспользуемся разделом с сообщением внутри, а также дополнительным разделом для небольшой строки прогресса:

<div class="tn-box tn-box-color-1">
    <p>Your settings have been saved successfully!</p>
    <div class="tn-progress"></div>
</div>

Блок оповещения будет обозначен классами tn-box и tn-box-color-1, которые будут использоваться для определения разных цветов.

Затем мы определим стиль блока:

.tn-box {
    width: 360px;
    position: relative;
    margin: 0 auto 20px auto;
    padding: 25px 15px;
    text-align: left;
    border-radius: 5px;
    box-shadow: 
        0 1px 1px rgba(0,0,0,0.1), 
        inset 0 1px 0 rgba(255,255,255,0.6);  
    opacity: 0;
    cursor: default;
    display: none;
}
 
.tn-box-color-1{
    background: #ffe691;
    border: 1px solid #f6db7b;
}

Мы выставим блоку параметр display: none, и зададим 0 в качестве значения уровня плотности отображения.

Строка прогресса будет оформлена следующим стилем:

.tn-progress {
    width: 0;
    height: 4px;
    background: rgba(255,255,255,0.3);
    position: absolute;
    bottom: 5px;
    left: 2%;
    border-radius: 3px;
    box-shadow: 
        inset 0 1px 1px rgba(0,0,0,0.05), 
        0 -1px 0 rgba(255,255,255,0.6);
}

Изначально, у строки будет выставлено 0 в качестве параметра ширины.

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

input.fire-check:checked ~ section .tn-box {
    display: block;
    animation: fadeOut 5s linear forwards;
}
 
input.fire-check:checked ~ section .tn-box .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}

Кнопка предшествует разделу с блоками оповещения, и поэтому мы можем использовать основной родственный комбинатор.

Если вы вместо этого захотите добавить класс посредством Javscript, то можете использовать нечто вроде этого:

.tn-box.tn-box-active {
    display: block;
    animation: fadeOut 5s linear forwards;
}
 
.tn-box.tn-box-active .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}

Где tn-box-active является классом, который вы применяете к div-элементу tn-box.

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

@keyframes fadeOut {
    0%  { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; transform: translateY(0px);}
    99% { opacity: 0; transform: translateY(-30px);}
    100% { opacity: 0; }
}

Мы назвали ее «fadeout», но на самом деле, она наоборот относится к появлению блока, и только потом способствует его исчезновению и перемещению вверх.

Анимация строки прогресса выглядит примерно следующим образом:

@keyframes runProgress {
    0%  { width: 0%; background: rgba(255,255,255,0.3); }
    100% { width: 96%; background: rgba(255,255,255,1); }
}

Мы анимируем параметр ширины до 96% (предыдущее значение было 2%, поэтому нам и с другой стороны следует оставить 2%), и уровень плотности отображения RGBA.
Продолжительность анимации строки прогресса будет немного короче, чем продолжительность анимации, так как мы запустим ее позже (для начала блоку необходимо появиться).

Примечание: Нам показалось, что было бы неплохо останавливать анимацию при наведении курсора мыши. Это имеет смысл, если пользователю захочется прочесть оповещение. Но, к сожалению, в данном случае могут возникнуть проблемы с браузерами семейства Webkit. В Chrome (19.0.1084.56 на Win) анимация преломляется, а в Safari (5.1.5 на Win) мы получили отчет о крахе WebKit2WebProcess.exe… Данный эффект отлично работает лишь в Firefox версиями выше 12.

В любом случае, вы можете сделать это следующим образом:

.tn-box.tn-box-hoverpause:hover, 
.tn-box.tn-box-hoverpause:hover .tn-progress{
    animation-play-state: paused;
}

Можно не говорить о том, что этот эффект будет работать только в тех браузерах, где имеется поддержка CSS-анимаций! Вам потребуется продумать версию отката для старых браузеров.

И на этом все! Надеемся, что данное руководство будет полезным для вас!

Посмотреть демо | Скачать архивом