Уведомления с помощью CSS-анимации

3 декабря 2013 | Опубликовано в css | 1 Комментарий »

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

Загрузить материалы или же просмотреть демо вы можете, нажав на соответствующие кнопки ниже.

Демо Загрузить материалы

Разметка будет состоять из блока из сообщением внутри и с блока с маленького индикатора прогресса:

<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); }
}
.tn-box.tn-box-hoverpause:hover,
.tn-box.tn-box-hoverpause:hover .tn-progress{
    animation-play-state: paused;
}

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

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

Автор - MARY LOU.

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

Уведомления с помощью CSS-анимации

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые