<section id="flashMessages">
    <div id="notifications" style=" ">
      <div class="flash notice">Your personal info has been updated.</div>
    </div>
  </section>
  <!-- /flashMessages -->

<div class="container">
  <a href="#" class="refresh">Replay</a>
</div>

@import "compass/css3";

$fontFamily: 'Helvetica', 'Arial';

body {
	background: #333;
  height: 100%;
	width: 100%;
  margin: 0;
  padding: 0;
  font-family: $fontFamily;
  padding-top: 20px;
}

.container {
	width: 950px;
  margin: 30px auto;
}

.refresh {
  position: relative;
 	@include border-radius(4px);
  @include background(linear-gradient(top, #44a1ff 0%,#3884d1 100%));
  display: inline-block;
  color: #FFF;
  border: 1px solid darken(#44a1ff, 10%);
  font-size: 12px;
  font-weight: bold;
  padding: 6px;
  text-decoration: none;
  @include text-shadow(rgba(0,0,0,.5) 0 -1px 0);
  @include box-shadow(rgba(0,0,0,1) 0 1px 2px, inset rgba(255,255,255,.3) 0 1px 0);
  &:hover {
    @include background(linear-gradient(top, darken(#44a1ff,5%) 0%,darken(#3884d1,5%) 100%));
  }
  &:active {
   top: 1px;
   @include box-shadow(inset rgba(255,255,255,.3) 0 1px 0);
  }

}
  

  
/* ------------------------------------------- */
/*    POSITIVE & NEGATIVE FLASH MESSAGING 		 */
/* ------------------------------------------- */

  #flashMessages {
    width:950px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    @include perspective(1000);
    &.has-notice {
      margin: 0 auto 26px auto;
    }
    #notifications {
      display: none;
      margin-bottom: 26px;
      &.hide-notice {
        $transform : translateZ( -15px ) rotateY( 0deg );
        @include transform($transform);
      } 
      &.show {
        $transform : translateZ( -15px ) rotateX( -90deg );
        @include transform($transform);
      }
      width: 100%;
      height: 100%;
      @include single-transition(transform, 1.5s);
      @include transform-style(preserve-3d);
      position: absolute;
      .flash {
        &.notice {
          @include border-radius;
      		@include background(#d12a2a);
      		@include background(image-url('http://getyocal.com/assets/parts/icons/ico-flashPositive.png') no-repeat 10px 7px, linear-gradient(rgba(41,154,11,1), rgba(36,130,10,1)));
      		@include box-shadow(inset rgba(255,255,255,.3) 0 2px 0, rgba(0,0,0,.3) 0 1px 1px);
          width: 950px;
          height: 16px;
          display: block;
          position: absolute;
          border: {
      			width: 1px;
      			style: solid;
      			top: {
      				color: darken(#299A0B, 5%);
      			}                        
      			right: {                 
      				color: darken(#24820A, 5%);
      			}                        
      			bottom: {                
      				color: darken(#24820A, 5%);
      			}                        
      			left: {                  
      				color: darken(#24820A, 5%);
      			}
      		}
         $transform : rotateX(  90deg ) translateZ( 15px );
         @include transform($transform);
         padding: 6px 0;
     		 text-indent: 40px;
     		 color: #FFF;
     		 font-weight: bold;
     		 font-size: 13px;
     		 @include text-shadow(0 -1px 0 rgba(0,0,0,.3));
        }
      }
      
      }
      .hiding {
        @include border-radius;
        @include box-shadow(rgba(0,0,0,1) 0 4px 12px);
        border: none;
        width: 950px;
        height: 30px;
        display: block;
        color: #FFF;
        position: absolute;
        @include background(none);
        $transform : rotateY( 0deg ) translateZ( 15px );
        @include transform($transform);
      } //hiding
    }

  
View Compiled
$(document).ready(function(){

    var displayNotification = function () {
      $('#flashMessages').addClass('has-notice');
      $('#flashMessages #notifications').append('<div class="hiding"></div>');
      $('#notifications').fadeIn(1000, function() {
        /* Fade in flash messages after 1/10 of a second */
        $('#flashMessages').delay(300).fadeIn(200, function() {
          $('#flashMessages #notifications').delay(100).removeClass('hide-notice').addClass("show");
        });
      });
    }

	//Checks to make sure there is a flash notice
	var doesExist = $('#flashMessages #notifications:hidden .notice, #flashMessages #notifications:hidden .error').length;
	if(doesExist) {
	  displayNotification();
	}
  
  $(".refresh").click(function(e) {
    e.preventDefault();
  	if( $('#flashMessages').hasClass('has-notice')) {
    	$('#flashMessages').removeClass('has-notice');
      $('#notifications').removeClass('show').delay(1100).fadeOut().delay(1000);
      displayNotification();
    }
});

});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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