toast.css

.t-wrap {
    position: fixed;
    bottom: 0;
    text-align: center;
    font-family: sans-serif;
    /* center wrapper on legacy browsers */
    width: 100%;
}

/* execute only on modern browsers */
@media (min-width: 0) {
    .t-wrap {
        /* resets */
        width: auto;
        
        /* allow clicking through on either side of the toasts */
        display: inline-block;

        /* center horizontally
         * also, use this to promote to a layer, so that it 
         * does not affect content underneath
         */
        left: 50%;
        -webkit-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
                transform: translate3d(-50%, 0, 0);
        
        transform-style: preserve-3d;
    }
}

.t-toast {
    width: 16em;
    margin: .6em auto;
    padding: .5em .3em;
    border-radius: 2em;
    box-shadow: 0 4px 0 -1px rgba(0,0,0,.2);
    
    color: #eee;
    cursor: default;
    overflow-y: hidden;
    
    /* use a layer for each toasts */
    /* this is more elegant than the translateZ hack */
    will-change: opacity, height, margin;
    
    /* add visual easing */
    -webkit-animation: t-enter 500ms ease-out; 
            animation: t-enter 500ms ease-out;
    
    /* keep animations from being jittery in firefox */
    transform-style: preserve-3d;
}

.t-toast.t-gray {
    background: #777;
    background: rgba(119, 119, 119, .9);
}
.t-toast.t-red {
    background: #D85955;
    background: rgba(216, 89, 85, .9);
}
.t-toast.t-blue {
    background: #4374AD;
    background: rgba(67, 116, 173, .9);
}
.t-toast.t-green {
    background: #75AD44;
    background: rgba(117, 173, 68, .9);
}
.t-toast.t-orange {
    background: #D89B55;
    background: rgba(216, 133, 73, .9);
}
.t-toast.t-white {
    background: #FAFAFA;
    background: rgba(255, 255, 255, .9);
    color: #777;
}

.t-click, .t-action { cursor: pointer; }

.t-action {
    font-weight: bold;
    text-decoration: underline;
    margin-left: 0.5em;
    display: inline-block;
}

.t-toast.t-exit {
    -webkit-animation: t-exit 500ms ease-in; 
            animation: t-exit 500ms ease-in;
}

@-webkit-keyframes t-enter {
    from { opacity: 0; max-height: 0em; }
    to { opacity: 1; max-height: 2em; }
} 
@keyframes t-enter {
    from { opacity: 0; max-height: 0em; }
    to { opacity: 1; max-height: 2em; }
}

@-webkit-keyframes t-exit {
    from { opacity: 1; max-height: 2em; }
    to { opacity: 0; max-height: 0em; }
} 
@keyframes t-exit {
    from { opacity: 1; max-height: 2em; }
    to { opacity: 0; max-height: 0em; }
}

@media screen and (max-width: 17em) {
    .t-toast {
        width: 90%;
    }
}