ИДЕЯ СОСТОИТ В ТОМ, ЧТОБЫ ПОКАЗАТЬ УВЕДОМЛЕНИЕ ИЛИ ПРЕДУПРЕЖДЕНИЕ НА ОПРЕДЕЛЕННОЕ ВРЕМЯ, А ЗАТЕМ ЗАСТАВИТЬ ЕГО ИСЧЕЗНУТЬ.

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

Разметка будет очень простая, это будет обыкновенный div с сообщением внутри, также он будет содержать дополнительный блок для индикатора:

<div class="tn-box tn-box-color-1">
 <p>Ваши настройки были успешно сохранены!</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);
}

Первоначально, прогресс-бар будет иметь ширину 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;
}

Кнопке предшествует секция с блоками сообщений и поэтому я могу использовать обобщенный родственный комбинатор (general sibling combinator).

 .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.

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

Во всяком случае, вот как вы можете это сделать:

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

Излишне говорить, что это будет работать только в браузерах, поддерживающих CSS-анимацию! Вам нужен будет какой-то резервный javascript для других браузеров.
[think=http://www.kolobok.us/smiles/standart/smoke.gif] 😎  И это все! Я надеюсь, вам понравилось![/think]

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему