.flash
  .flash__icon
    i.icon.fa.fa-check-circle-o
  p.flash__body Success!
  
h1 Notification flash message 
  
a.button Flash me
View Compiled
$lightgray: #ebeff1
$gray: #cdd7dc
$darkgray: #89989c
$green: #66847C

$padding: 15px
$border-radius: 2px
  
*
  box-sizing: border-box

html
  padding-top: 25px
  background-color: #FDF6E3
  font-family: "Signika"
  font-size: 16px
  font-weight: 400
  color: $green
  text-rendering: optimizeLegibility 
  -webkit-font-smoothing: antialiased
    
h1
  text-align: center
  font-weight: 400
    
// ---------------------------- \\
// ---------- FLASH ----------- \\
// ---------------------------- \\

.flash
  display: block
  position: fixed
  top: 25px
  right: 25px
  width: 350px
  padding: 20px 25px 20px 85px
  font-size: 16px
  font-weight: 400
  color: $green
  background-color: #FFF
  border: 2px solid $green
  border-radius: $border-radius
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25)
  opacity: 0
.flash__icon
  position: absolute
  top: 50%
  left: 0
  width: 1.8em
  height: 100%
  padding: 0 0.4em
  background-color: $green
  color: #FFF
  font-size: 36px
  font-weight: 300
  transform: translate(0,-50%)
  .icon
    position: absolute
    top: 50%
    transform: translate(0,-50%)
      
      
// ---------------------------- \\
// ---------- BUTTON ---------- \\
// ---------------------------- \\

.button
  position: absolute
  top: 50%
  left: 50%
  padding: 10px 20px
  border: 2px solid $green
  border-radius: 2px
  color: $green
  transform: translate(-50%, -50%)
  transition: all 0.1s
  &:hover
    cursor: pointer
    color: #FFF
    background-color: $green
  &:active
    box-shadow: none
    background-color: darken($green, 3%)
      

// ---------------------------- \\
// ----- ANIMATION MIXINS ----- \\
// ---------------------------- \\

// Mixin for vendor prefixed animations
@mixin animation($animate...)
  $max: length($animate)
  $animations: ''

  @for $i from 1 through $max 
    $animations: #{$animations + nth($animate, $i)}

    @if $i < $max 
      $animations: #{$animations + ", "}
      
  
  -webkit-animation: $animations
  -moz-animation:    $animations
  -ms-animation:     $animations
  -o-animation:      $animations
  animation:         $animations

// Mixin for vendor prefixed keyframes
@mixin keyframes($animationName) 
  @-webkit-keyframes #{$animationName} 
    @content
  
  @-moz-keyframes #{$animationName} 
    @content
  
  @-o-keyframes #{$animationName} 
    @content
  
  @keyframes #{$animationName} 
    @content

  
// ------------------------------- \\
// ----- ANIMATION KEYFRAMES ----- \\
// ------------------------------- \\

+keyframes(drop-in-fade-out) 
  0%
    opacity: 0
    visibility: visible
    -webkit-transform: translate3d(0, -200%, 0)
    -moz-transform: translate3d(0, -200%, 0)
    -ms-transform: translate3d(0, -200%, 0)
    -o-transform: translate3d(0, -200%, 0)
    transform: translate3d(0, -200%, 0)
  12%
    -webkit-transform: translate3d(0, 0, 0)
    -moz-transform: translate3d(0, 0, 0)
    -ms-transform: translate3d(0, 0, 0)
    -o-transform: translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0)
  20%
    opacity: 1
  70%
    opacity: 1
    visibility: visible
    -webkit-transform: translate3d(0, 0, 0)
    -moz-transform: translate3d(0, 0, 0)
    -ms-transform: translate3d(0, 0, 0)
    -o-transform: translate3d(0, 0, 0)
    transform: translate3d(0, 0, 0)
  80%
    opacity: 0
  100%
    visibility: hidden
    -webkit-transform: translate3d(75%, 0, 0)
    -moz-transform: translate3d(75%, 0, 0)
    -ms-transform: translate3d(75%, 0, 0)
    -o-transform: translate3d(75%, 0, 0)
    transform: translate3d(25%, 0, 0)
 
      
// ----------------------------- \\
// ------ ANIMATION CLASS ------ \\
// ----------------------------- \\

.animate--drop-in-fade-out
  +animation('drop-in-fade-out 3.5s 0.4s cubic-bezier(.32,1.75,.65,.91)')
View Compiled
$( ".button" ).click(function() {
  $( ".flash" ).addClass( "animate--drop-in-fade-out" );
  setTimeout(function(){
    $( ".flash" ).removeClass( "animate--drop-in-fade-out" );
  }, 3500);
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js