<a href="#" class="apo1">Яичное уведомление</a>   
<a href="#" class="apo2">Зелёное уведомление</a>   
<a href="#" class="apo3">Баклажанное уведомление</a>   
<section>   
<div class="tn-box tn-box-color-1">   
<p>Ложки нет!</p>   
<div class="tn-progress"></div>   
</div>   
<div class="tn-box tn-box-color-2">   
<p>Я просто зелёное уведомление!</</p>   
<div class="tn-progress"></div>   
</div>   
<div class="tn-box tn-box-color-3">   
<p>А я ленивая жопа, которая дольше всех сваливает с экрана</p>   
<div class="tn-progress"></div>   
</div>   
</section>

.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;   
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";   
filter: alpha(opacity=0);   
cursor: default;   
display: none;   
}   
.tn-box p {   
font-weight: bold;   
font-size: 16px;   
margin: 0;   
padding: 0 10px 0 60px;   
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);   
}   
.tn-box p:before {   
text-align: center;   
border: 3px solid rgba(255, 255, 255, 1);   
margin-top: -17px;   
top: 50%;   
left: 20px;   
width: 30px;   
content:'i';   
font-size: 30px;   
color: rgba(255, 255, 255, 1);   
position: absolute;   
height: 30px;   
line-height: 30px;   
border-radius: 50%;   
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);   
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);   
}   
.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);   
}   
/* Colors */   
.tn-box-color-1 {   
background: #ffe691;   
border: 1px solid #f6db7b;   
}   
.tn-box-color-1 p {   
color: #7d5912;   
}   
.tn-box-color-2 {   
background: #99ffb1;   
border: 1px solid #7ce294;   
}   
.tn-box-color-2 p {   
color: #2d8241;   
}   
.tn-box-color-3 {   
background: #dd9aff;   
border: 1px solid #b367db;   
}   
.tn-box-color-3 p {   
color: #69288b;   
}   
/* If you use JavaScript you could add a class instead: */   
.tn-box.tn-box-active {   
display: block;   
-webkit-animation: fadeOut 5s linear forwards;   
-moz-animation: fadeOut 5s linear forwards;   
-o-animation: fadeOut 5s linear forwards;   
-ms-animation: fadeOut 5s linear forwards;   
animation: fadeOut 5s linear forwards;   
}   
.tn-box.tn-box-active .tn-progress {   
-webkit-animation: runProgress 4s linear forwards 0.5s;   
-moz-animation: runProgress 4s linear forwards 0.5s;   
-o-animation: runProgress 4s linear forwards 0.5s;   
-ms-animation: runProgress 4s linear forwards 0.5s;   
animation: runProgress 4s linear forwards 0.5s;   
}   
@-webkit-keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
-webkit-transform: translateY(0px);   
}   
99% {   
opacity: 0;   
-webkit-transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@-moz-keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
-moz-transform: translateY(0px);   
}   
99% {   
opacity: 0;   
-moz-transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@-o-keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
-o-transform: translateY(0px);   
}   
99% {   
opacity: 0;   
-o-transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@-ms-keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
-ms-transform: translateY(0px);   
}   
99% {   
opacity: 0;   
-ms-transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@keyframes fadeOut {   
0% {   
opacity: 0;   
}   
10% {   
opacity: 1;   
}   
90% {   
opacity: 1;   
transform: translateY(0px);   
}   
99% {   
opacity: 0;   
transform: translateY(-30px);   
}   
100% {   
opacity: 0;   
}   
}   
@-webkit-keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
@-moz-keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
@-o-keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
@-ms-keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
@keyframes runProgress {   
0% {   
width: 0%;   
background: rgba(255, 255, 255, 0.3);   
}   
100% {   
width: 96%;   
background: rgba(255, 255, 255, 1);   
}   
}   
/* Let's add some different durations for the demo */   
input.fire-check:checked ~ section .tn-box:nth-child(2) {   
-webkit-animation-duration: 6s;   
-moz-animation-duration: 6s;   
-o-animation-duration: 6s;   
-ms-animation-duration: 6s;   
animation-duration: 6s;   
-webkit-animation-delay: 0.2s;   
-moz-animation-delay: 0.2s;   
-o-animation-delay: 0.2s;   
-ms-animation-delay: 0.2s;   
animation-delay: 0.2s;   
}   
input.fire-check:checked ~ section .tn-box:nth-child(2) .tn-progress {   
-webkit-animation-duration: 5s;   
-moz-animation-duration: 5s;   
-o-animation-duration: 5s;   
-ms-animation-duration: 5s;   
animation-duration: 5s;   
-webkit-animation-delay: 0.7s;   
-moz-animation-delay: 0.7s;   
-o-animation-delay: 0.7s;   
-ms-animation-delay: 0.7s;   
animation-delay: 0.7s;   
}   
input.fire-check:checked ~ section .tn-box:nth-child(3) {   
-webkit-animation-duration: 9s;   
-moz-animation-duration: 9s;   
-o-animation-duration: 9s;   
-ms-animation-duration: 9s;   
animation-duration: 9s;   
-webkit-animation-delay: 0.4s;   
-moz-animation-delay: 0.4s;   
-o-animation-delay: 0.4s;   
-ms-animation-delay: 0.4s;   
animation-delay: 0.4s;   
}   
input.fire-check:checked ~ section .tn-box:nth-child(3) .tn-progress {   
-webkit-animation-duration: 7.5s;   
-moz-animation-duration: 7.5s;   
-o-animation-duration: 7.5s;   
-ms-animation-duration: 7.5s;   
animation-duration: 7.5s;   
-webkit-animation-delay: 0.9s;   
-moz-animation-delay: 0.9s;   
-o-animation-delay: 0.9s;   
-ms-animation-delay: 0.9s;   
animation-delay: 0.9s;   
}   
/* Last example pauses on hover (causes problems in WebKit browsers) */   
.tn-box.tn-box-hoverpause:hover, .tn-box.tn-box-hoverpause:hover .tn-progress {   
-webkit-animation-play-state: paused;   
-moz-animation-play-state: paused;   
-o-animation-play-state: paused;   
-ms-animation-play-state: paused;   
animation-play-state: paused;   
}

<script>   
$('.apo1').click(function () {   
$('.tn-box-color-1').removeClass('tn-box-active');   
setTimeout(function () {   
$('.tn-box-color-1').addClass('tn-box-active');   
}, 100);   
});   

$('.apo2').click(function () {   
$('.tn-box-color-2').removeClass('tn-box-active');   
setTimeout(function () {   
$('.tn-box-color-2').addClass('tn-box-active');   
}, 100);   
});   

$('.apo3').click(function () {   
$('.tn-box-color-3').removeClass('tn-box-active');   
setTimeout(function () {   
$('.tn-box-color-3').addClass('tn-box-active');   
}, 100);   
});   
</script>