Tutorial animación CSS3 | Caja de Suscripción

Aprende a crear una animación CSS3 a tu caja de suscripción y consigue un atractivo efecto para tus visitantes. 

Las animaciones CSS3 nos permiten crear un efecto de movimiento sin necesidad de utilizar Javascript. Básicamente las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

Pero no voy a liaros mucho y vamos a ver un ejemplo práctico de como implementar estas animaciones en CSS3.

El html

Antes de comenzar con nuestra animación CSS3 deberemos de crear nuestra plantilla en html.

<section class="container">
 <section class="one">
  <div class="logo">
    <img src="https://image.flaticon.com/icons/svg/143/143361.svg">
  </div>
  <h2 class="heading">
    Por favor suscríbete para obtener actualizaciones
  </h2>
  <p> Si quieres estar a la última suscríbete en mi blog. 
  </p>
  <form>
    <input type='text' placeholder="Introduce tu email"><br/>
    <button class="btn" role="button">
      Suscribirse
    </button>
  </form>
  </section>
  <section class="two">
    <h3>
      Gracias por tu suscripción!
    </h3>
    <div class="close"> 
    </div>
  </section>
</section>

Dando los estilos a nuestra página

A continuación vamos a crear los estilos a nuestro formulario de suscripción.

*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

body, html{
  background:#9c27b0;
  font-family: 'Open Sans', sans-serif;
}

.container{
  width:400px;
  height:500px;
  background:#fff;
  margin:20px auto;
  border-radius:4px;
  text-align:center;
  position:relative;
  -moz-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
  -webkit-box-shadow: 0px 0px 28px rgba(0,0,0,.3);
   box-shadow: 0px 0px 28px rgba(0,0,0,.3);
   overflow:hidden;
}


.one , .two{
  display:block;
  height:500px;
  width:400px;
  margin:0px auto;
  position:absolute;
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.one{
  top:0;
  background:#fff;
  margin-top:20px;
}

.two{
  top:500px;
  background:#ffc107;
}

.two h3{
  color:#fff;
  padding-top:240px;
}

.container .logo{
  width:40%;
  height:auto;
  display:block;
  margin:20px auto;
}

.one  .heading{
  color:#607d8b;
  text-transform:capitalize;
  font-size:20px;
  fonr-weight:900;
  margin-top:40px;
}

.container p{
  font-size:12px;
  color:#b7b7b7;
  font-weight:lighter;
  text-transform:capitalize;
}

input[type='text']{
  width:85%;
  height:60px;
  margin-top:20px;
  margin-bottom:20px;
  padding-bottom:-80px;
  border:none;
  border-bottom:3px solid #ffc107;
  overflow:auto;
  position:relative;
}

input[type='text']:active:focus,
input[type='text']:focus,
input[type='text']:hover{
  outline : none;
  font-size:20px;
}


input[type='text']:focus::-webkit-input-placeholder,
input[type='text']:active:focus::-webkit-input-placeholder
{
  font-size:12px;
  display:block;
  -webkit-transform:translateY(-20px);
  transform:translateY(-20px);
}

::-webkit-placeholder{
  font-size:14px;
  color:#b7b7b7;
  text-transform:capitalize;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; 
}

::placeholder{
  font-size:14px;
  color:#b7b7b7;
  text-transform:capitalize;
  -webkit-transform:translateY(0px);
  transform:translateY(0px);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; 
}

.one  .btn{
  width:85%;
  background:#ffc107;
  padding:15px;
  border:none;
  border-radius:5px;
  font-size:14px;
  color:#fff;
  text-transform:capitalize;
  font-family: 'Open Sans', sans-serif;
}

.one  .btn:active:focus,
.one  .btn:focus,
.one  .btn:hover{
  outline : none;
}

.one .btn:hover{
  cursor:pointer;
}

.close{
  position:relative;
  top:0;
  left:0;
  display:block;
  cursor:pointer;
}

.close:before{
  content:"";
  position:absolute;
  top:-240px;
  right:50px;
  display:block;
  width:22px;
  height:3px;
  background:#fff;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

.close:after{
  content:"";
  position:absolute;
  top:-240px;
  right:50px;
  display:block;
  width:22px;
  height:3px;
  background:#fff;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

Animación CSS3 con Javascript

Para finalizar nuestro formulario de suscripción vamos a escribir un poco de código para animar nuestro formulario.

Animaciones en el navegador con Html5 y JavaScript

Al finalizar nos dará la opción de cerrar la ventana pulsando en la pestaña.

$(function(){
  $('.one form .btn').on('click',function(){ 
     $(this).parents('.one').animate({
          top : '-500px'
        },500);
    
     $(this).parents('.one').siblings('.two').
     animate({
          top : '0px'
        },500);
    return false;
  });

$('.two .close').on('click',function(){
  $(this).parent().animate({
   top : '-500px'
  },500);
  
  $(this).parent().siblings('.one').animate({
   top : '0px'
  },500);
  return false;
 });
});

Resultado Final:

Aquí os dejo el resultado final de nuestro formulario animado. Sin duda una manera elegante y profesional de agregar suscriptores a nuestra página.

Ver Demo Animación Cajas CSS3 by Antonio José (@ajmorales73) on CodePen.