Уведомления с CSS анимацией

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

Сложность

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

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

У индикатора будет следующий стиль:

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

В этом примере я сделаю кнопку, которая запускает css анимацию:

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

Анимация css для самого поля:

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

Анимация css для индикатора процесса:

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

Мы анимируем ширину размером 96% и непрозрачность co значением RGBA.

Продолжительность css анимации индикатора процесса будет немного меньше, чем продолжительность анимации поля, так как мы запустим его позже.

Сначала я хотел сделать остановку анимации при наведении курсора. Это целесообразно, если пользователь не хочет убирать уведомление, чтобы полностью прочитать его. Но к сожалению, есть некоторые проблемы с браузерами WebKit. В Chrome (19.0.1084.56 на Win) повреждается анимация, в то время как в Safari (5.1.5 Win) я получаю отчет об ошибке WebKit2WebProcess.exe …, Зато работает превосходно в Firefox&gt; 12.0.

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

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

Перевод статьи Timed Notifications with CSS Animations

Тэги: animate

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.