LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

login

CSS
html {
    background-color: #2b86ec;
}

body {
  overflow:hidden;
}
button {
  margin :auto;
  display:block;
  background: transparent;
  color: #fff;
  border:2px solid #fff;
  border-radius: 20px;
  padding: 8px 20px;
  cursor:pointer;
}
h1 {
  font-family:sans-serif;
  color: #fff;
  text-align:center;
}



form {
  position:relative;
  top:200px;
  margin:auto;
  background-color: #2b86ec;
  width:250px;
  height:250px;
  border-radius:2000px;
  

}

.submitted {
    transition: transform .51s ease-out;
  
  -webkit-animation: pound .51s ease-out;
  animation: pound 1s;
  transform-origin: center;
  -webkit-transform-origin: center;
  -webkit-animation-fill-mode: forwards;
}

@keyframes pound {
	from { transform: none; }
	to { transform: scale(.1);background:#fff; }
}

@-webkit-keyframes pound {
	from { transform: none; }
	to{ transform: scale(.1);background:#fff; }	
}


@-webkit-keyframes bounce { 
   0%, 100% {opacity:1;} 
    50% {opacity:0;}
} 

@keyframes bounce { 
   0%, 100% {opacity:1;} 
    50% {opacity:0;}
} 

.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
  background:#fff;
  transform: scale(.1);
  -webkit-transform: scale(.1);
  transform-origin: center;
  -webkit-transform-origin: center;
  
  
    -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
  
}




.grow {
    transition: transform 1s ease-in;
  
  -webkit-animation: grow 1.3s ease-in;
  animation: grow 1.3s;
  transform-origin: center;
  -webkit-transform-origin: center;
  -webkit-animation-fill-mode: forwards;
}

@keyframes grow {
	from { transform: scale(.1); }
	to { transform: scale(20);background:#eee; }
}

@-webkit-keyframes grow {
	from { transform: scale(.1); }
	to{ transform: scale(20);background:#eee; }	
}


input {
  display:block;
  margin: 20px auto;
  border:none;
  height:30px;
  border-radius:20px;
  text-indent: 10px;
}
JS
// SORRY FOR UGLY CODE. FIX LATER
$(document).ready( function () {
   $('.submit').on('click', function (e) {     
     e.preventDefault();
     
     $('form * ').fadeOut('fast');
     $('form').addClass('submitted');
     setTimeout( function () {
         $('form * ').css("opacity", '0');
         $('form').removeClass('submitted');
         $('form').addClass('bounce');
      }, 1000);
     
     setTimeout( function () {
       
         
         $('form').removeClass('bounce');
       $('form').css("opacity", '1');
       
         $('form').addClass('grow');
      }, 3500);
   });
  
});
Host Instantly Drag and Drop Website Builder

 

Description

form submit animation. After the token is received, we replace the content with a new UI.
Term
Wed, 11/29/2017 - 11:27

Related Codes

Pen ID
Pen ID
Pen ID