CodePen

HTML

            
              <div class="text-animation">It's works ! Yeah !</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @-webkit-keyframes textAnimation { 
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    10% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }

}

.text-animation {
    z-index: 1000;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: textAnimation 2s linear  2s;
    -moz-animation: textAnimation 2s linear  2s;
    -o-animation: textAnimation 2s linear  2s;
    -ms-animation: textAnimation 2s linear  2s;
    animation: textAnimation 2s linear  2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s;
  
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................