.add Add toast
ul.toasts
View Compiled
html, body
  background: #111
  overflow-x: hidden

.add
  display: inline-block
  cursor: pointer
  font-family: sans-serif
  padding: 15px 20px
  background: #333
  color: white
  border-radius: 2px
  margin: 10px
  user-select: none
  transition: all .2s
  &:hover
    background: #444
  &:active
    background: #222
    color: #ccc

.toasts
  position: fixed  
  max-width: 100%
  width: 250px
  right: 0
  bottom: 0
  transform: translateZ(0)
  padding: 0 10px
  box-sizing: border-box
  transition: height 1s
  z-index: 100

  li
    width: 100%
    box-sizing: border-box
    font-family: sans-serif
    padding: 15px 20px
    background: #222
    color: white
    border-radius: 2px
    margin: 10px 0
    animation: popup .6s cubic-bezier(0.10, 1.06, 0.60, 1.34), hide .4s 3s
    
    &.message
      background: #358
    &.error
      background: brown
    &.warn
      background: chocolate
    &.success
      background: seagreen

@keyframes popup
  from
    transform: translateX(50%)
    opacity: 0
  100%
    transform: translateX(0%)
    opacity: 1


@keyframes hide
  from
    opacity: 1
  100%
    opacity: 0
toasts = document.querySelector '.toasts'
button = document.querySelector '.add'
types = ['error', 'message', 'warn', 'success']


addToast = (type = 'message', text)->
  toast = document.createElement 'li'
  toast.classList.add type
  toasts.appendChild toast
  toast.innerHTML = "#{type}: Lorem ipsum dolor"
  
button.addEventListener 'click', ->
  type = types[Math.floor(Math.random()*types.length)]
  addToast type, 'Lorem'


toasts.addEventListener 'webkitAnimationEnd', (e)->
  if e.animationName is 'hide'
    toasts.removeChild e.target

toast = ()->
  type = types[Math.floor(Math.random()*types.length)]
  addToast type, 'Lorem'
  clearTimeout timeout
  timeout = setTimeout toast, (Math.random()*2000+2000)
 
timeout = setTimeout toast, 1000
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.