В этом уроке показано, как создать некоторые простые исчезающие со временем уведомления с 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 и зададим ему полную прозрачность.

У индикатора выполнения задачи будут следующий стиль:

.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);
}

Изначально у индикатора будет нулевая ширина.

В этом примере используется кнопка-переключатель, которая после нажатия запускает анимацию:

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;
}

Кнопка расположена перед секцией с блоками уведомлений, так что можно использовать объединение подобных классов.

Если Вы хотите добавить вместо этого класс с JavaScript, Вы можете задать такие стили:

.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 – это класс, который Вы добавляете к блоку 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 в системе Windows анимация ломается. А в браузере Safari версии 5.1.5 в системе Windows получаем сообщение о сбое WebKit2WebProcess.exe. Но это свойство отлично работает в браузере Firefox, начиная с версии 12.0.

Так или иначе, вот как это можно сделать:

.tn-box.tn-box-hoverpause:hover,

.tn-box.tn-box-hoverpause:hover .tn-progress{

    animation-play-state: paused;
}

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

Это все! Надеемся, Вам это пригодится!

Демо – Исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

• Объединение CSS-анимации и JavaScript
• Интерактивная инфографика с SVG и CSS анимацией
• Создание CSS3 исчезающих окон уведомления