ul
  li
    | Message one
  li
    | Message two
  li
    | Message three
  li
    | Message four

// How long would you like each message to be displayed?
$message-time: 1s;
// How many messages are there?
$message-count: 4;

// Note that this is a fade in, immediately
// followed by a fade out. You might want to
// adjust the timings, so the message is
// fully opaque for longer.
@keyframes notify {
  0%                             { opacity: 0; }
  #{100% / ($message-count * 2)} { opacity: 1; }
  #{100% / $message-count}       { opacity: 0; }
}

// Note that the ul will be zero pixels high
// The list items stack on top of each other
ul { position: relative; }

li {
  animation: notify $message-time * $message-count infinite;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

// ... and ideally fade in one after the other
@for $i from 1 through $message-count {
  li:nth-child(#{$i}) { animation-delay: $message-time * ($i - 1); }
}

// Styling only, no functional CSS
body {
  font-family: -apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

body {
  max-width: 30em;
  margin: 1em auto;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}