title: CSS3 - Make div disappear after delay
body: <p>I am working in a css code for my project and I got to animate a div only using css3 animations. I tried generating below code using some tools available in web and produced a shake effect animation.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.error {
      background-color: #E49F5C;
      color: #fff;
      padding: 20px;
      line-height: 50px;
      border-radius: 5px;
      font-size: 13px;
      position: fixed;
      bottom: 20px;
      right: 20px;
      min-width: 200px;
      text-align: center;
      height: 100px;
      z-index: 99999;
      animation: animationFrames linear 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation: animationFrames linear 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: animationFrames linear 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -o-animation: animationFrames linear 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -ms-animation: animationFrames linear 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    
  }
  @keyframes animationFrames{
    0% {
      transform:  translate(0px,0px)  ;
    }
    10% {
      transform:  translate(-10px,0px)  ;
    }
    20% {
      transform:  translate(10px,0px)  ;
    }
    30% {
      transform:  translate(-10px,0px)  ;
    }
    40% {
      transform:  translate(10px,0px)  ;
    }
    50% {
      transform:  translate(-10px,0px)  ;
    }
    60% {
      transform:  translate(10px,0px)  ;
    }
    70% {
      transform:  translate(-10px,0px)  ;
    }
    80% {
      transform:  translate(10px,0px)  ;
    }
    90% {
      transform:  translate(-10px,0px)  ;
    }
    100% {
      transform:  translate(0px,0px)  ;
    }
  }
  
  @-moz-keyframes animationFrames{
    0% {
      -moz-transform:  translate(0px,0px)  ;
    }
    10% {
      -moz-transform:  translate(-10px,0px)  ;
    }
    20% {
      -moz-transform:  translate(10px,0px)  ;
    }
    30% {
      -moz-transform:  translate(-10px,0px)  ;
    }
    40% {
      -moz-transform:  translate(10px,0px)  ;
    }
    50% {
      -moz-transform:  translate(-10px,0px)  ;
    }
    60% {
      -moz-transform:  translate(10px,0px)  ;
    }
    70% {
      -moz-transform:  translate(-10px,0px)  ;
    }
    80% {
      -moz-transform:  translate(10px,0px)  ;
    }
    90% {
      -moz-transform:  translate(-10px,0px)  ;
    }
    100% {
      -moz-transform:  translate(0px,0px)  ;
    }
  }
  
  @-webkit-keyframes animationFrames {
    0% {
      -webkit-transform:  translate(0px,0px)  ;
    }
    10% {
      -webkit-transform:  translate(-10px,0px)  ;
    }
    20% {
      -webkit-transform:  translate(10px,0px)  ;
    }
    30% {
      -webkit-transform:  translate(-10px,0px)  ;
    }
    40% {
      -webkit-transform:  translate(10px,0px)  ;
    }
    50% {
      -webkit-transform:  translate(-10px,0px)  ;
    }
    60% {
      -webkit-transform:  translate(10px,0px)  ;
    }
    70% {
      -webkit-transform:  translate(-10px,0px)  ;
    }
    80% {
      -webkit-transform:  translate(10px,0px)  ;
    }
    90% {
      -webkit-transform:  translate(-10px,0px)  ;
    }
    100% {
      -webkit-transform:  translate(0px,0px)  ;
    }
  }
  
  @-o-keyframes animationFrames {
    0% {
      -o-transform:  translate(0px,0px)  ;
    }
    10% {
      -o-transform:  translate(-10px,0px)  ;
    }
    20% {
      -o-transform:  translate(10px,0px)  ;
    }
    30% {
      -o-transform:  translate(-10px,0px)  ;
    }
    40% {
      -o-transform:  translate(10px,0px)  ;
    }
    50% {
      -o-transform:  translate(-10px,0px)  ;
    }
    60% {
      -o-transform:  translate(10px,0px)  ;
    }
    70% {
      -o-transform:  translate(-10px,0px)  ;
    }
    80% {
      -o-transform:  translate(10px,0px)  ;
    }
    90% {
      -o-transform:  translate(-10px,0px)  ;
    }
    100% {
      -o-transform:  translate(0px,0px)  ;
    }
  }
  
  @-ms-keyframes animationFrames {
    0% {
      -ms-transform:  translate(0px,0px)  ;
    }
    10% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    20% {
      -ms-transform:  translate(10px,0px)  ;
    }
    30% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    40% {
      -ms-transform:  translate(10px,0px)  ;
    }
    50% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    60% {
      -ms-transform:  translate(10px,0px)  ;
    }
    70% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    80% {
      -ms-transform:  translate(10px,0px)  ;
    }
    90% {
      -ms-transform:  translate(-10px,0px)  ;
    }
    100% {
      -ms-transform:  translate(0px,0px)  ;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="error fadeInRight" id="errorbox"&gt;Please enter title&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update:</strong> I am using this div to show the server side php form validation error message.
  Now my question is how to make this div display for 5 seconds and disappear with a fade out effect after executing the above animation part. This final animation should be only using css3 again. Any help?</p>