<div id="content"> 
  <div id="login_form">
    <div class="message">
      <p>Votre compte à bien été crée !</p>
    </div>
    <form>
      <h2>Login</h2>
        <input type="text" name="username" value=""  placeholder="identifiant"/>
        <input type="password" name="password" value="" placeholder="Mot de passe" />
        <input type="submit" name="submit" value="Se connecter"  />
      </form>
  </div>     
</div> 
#login_form {
    width:90%;
    background-color: #bdd2ff;
    border: 1px solid white;
    margin: 50px auto 0;
    padding: 1em;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
}

input[type=text], input[type=password] {
    text-align:center;
    display: block;
    margin: 0 auto 1em auto;
    width: 90%;
    border: 1px solid #818181;
    padding: 5px;
}

@keyframes cssAnimation {
    0%   {opacity: 1; height: 100%;}
    90%  {opacity: 1;; height: 50%;}
    100% {opacity: 0; height: 0px;}
}

.message{
  margin: 0 auto 1em auto;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #15cf46;
  width: 30%;
  animation: cssAnimation 3s forwards;
}

.message p{
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.