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

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

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