.alert-float {
    margin-right: 16px;
    margin-top: 16px;
    pointer-events: all;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(50, 50, 50, 0.60);
    -moz-box-shadow:    0px 0px 10px 1px rgba(50, 50, 50, 0.60);
    box-shadow:         0px 0px 10px 1px rgba(50, 50, 50, 0.60);
}

.alert-container {
    position: fixed;
    width: 280px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 9990;
    pointer-events: none;
    background-color: rgba(255,255,255, 0);
    opacity: 0.95;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}


.alert-float {
    margin-right: 16px;
    margin-top: 16px;
    pointer-events: all;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(50, 50, 50, 0.60);
    -moz-box-shadow:    0px 0px 10px 1px rgba(50, 50, 50, 0.60);
    box-shadow:         0px 0px 10px 1px rgba(50, 50, 50, 0.60);
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.alert-container {
    position: fixed;
    width: 280px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 9990;
    pointer-events: none;
    background-color: rgba(255,255,255, 0);
    opacity: 0.95;
}


Fix opacity transition for notification,
Fix opacity transition for notification,

not to overlap with the global fade class
