Success Message Transition

index.html

<div class="loader abs tl"><!-- Loading --></div>
	<div class="container abs">
    	<h1>Awesome!</h1>
    <h3>Your pills are on their way.</h3>     
    </div>

script.js

 $(window).load(function() {
     co = $('.container');
     $('.loader').animate({
         opacity: '0'
     }, 500, function() {
         co.animate({
             width: '100%',
             height: '100%',
             top: '0%',
             left: '0%'
         }, 500, function() {
             $(this).find('*').delay(250).animate({
                 opacity: '1'
             }, 500);
             $(this).css('overflow', 'auto');
         });
     });
 });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

*{
  margin:0px;
  padding:0px;
  outline:0px none;
  border:0px none;
}
html{
  color:#000000;
  background:#ffffff;
  width:100%;
  height:100%;
}

.button {
  text-align: center;
  position: center;
  display: inline-block;
}

/* HWAForce */
body {
  transform: translate3d(0, 0, 0);
  backface-visibility:hidden;
  perspective:1000;-webkit-transform:translate3d(0, 0, 0);
  -webkit-backface-visibility:hidden;
  -webkit-perspective:1000;
  -moz-transform:translate3d(0, 0, 0);
  -moz-backface-visibility:hidden;
  -moz-perspective:1000;
  -ms-transform:translate3d(0, 0, 0);
  -ms-backface-visibility:hidden;
  -ms-perspective:1000;
}

body {
  font:100%/1 Arial;
  word-spacing:0px;
  letter-spacing:0px;
  width:100%;
  font-weight:normal;
  font-style:normal;
  height:100%;
  position:relative;
}

a {
  text-decoration:none;
  cursor:pointer;
}

h1,h2,h3,h4,h5,h6 {
  display:block; 
  text-align: center;
}

.clear {
  clear:both;
  overflow:hidden;
}

.container {
  width:100%;
}
.abs {
  position:absolute;
}

.tl {
  top:0px;
  left:0px;
}


.loader {
  width:100%;
  height:100%;
  text-align:center;
  color:#ffffff;
}

.container {
  background:#57bc76;
  height:0;
  width:0;
  top:50%;
  left:50%;
  overflow:hidden;
}

.container code{
  width:70%;
  margin:25px 0px;
  font-size:16px;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#0072bc;
  padding:20px 50px;
  display:block;
  background:#f0f0f0;
}

.container p{
  width:70%;
  margin:25px 50px;
  font-size :16px;
  font-family: 'Montserrat', Arial, sans-serif;
  color:#fff;
}
.container h1{
  margin:225px 50px 0px 50px;
  font-size:52px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  color:#fff;
}

.container h3 {
  margin:25px 50px;
  font-size:20px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 100;
  color:#fff;
}

.container > * {
  opacity: 0;
}

success-message-transition.markdown

Success Message Transition

Simple success message transition

A Pen by Ryan on CodePen.

License.