Text Animation Effect

Text Animation Effect...

Demo

HTML

<div class="animation-text-effect">
        <div class="animation-text-container">
                <div class="animation-text-content">
                        <h2 class="frame-1">What is Lorem Ipsum?</h2>
                        <h2 class="frame-2">Where does it come from?</h2>
                        <h2 class="frame-3">Why do we use it?</h2>
                        <h2 class="frame-4">Now!</h2>
                        <h2 class="frame-5"><span>Lorem Ipsum</span> <span>is simply</span> <span>dummy text.</span></h2>
                </div>
        </div>
</div>

CSS

<style>
        body {
            background: #037cd5;
        }
        
        .animation-text-effect {
            width: 100%;
            position: relative;
            overflow:hidden;
        }
        
        a {
          text-decoration:none;
        }
        
        h1.main,p.demos {
            -webkit-animation-delay: 18s;
            -moz-animation-delay: 18s;
            -ms-animation-delay: 18s;
            animation-delay: 18s;
        }
        .animation-text-container {
            width: 100%;
            height: 400px;
            z-index: 0;
            background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
            background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
            background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
            background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
        }
        .animation-text-content {
            position: absolute; left: 0px; top: 0px; 
            width: 100%;
            height: 100%;
            z-index: 1000;
            display: -webkit-box; display: 
          -moz-box; display: -ms-flexbox; 
          display: -webkit-flex; 
          display: flex;  
          -webkit-flex-flow: row wrap;
          justify-content: space-around;
        }
        .animation-text-container h2 {
            position: absolute;
            top: 50%;
            left:0;
            line-height: 60px;
            margin-top: -27px;
            font-size: 3.2em;
            width: 100%;
            text-align: center;
            color: transparent;
            -webkit-animation: blurFadeInOut 3s ease-in backwards;
            -moz-animation: blurFadeInOut 3s ease-in backwards;
            -ms-animation: blurFadeInOut 3s ease-in backwards;
            animation: blurFadeInOut 3s ease-in backwards;
        }
        .animation-text-container h2.frame-1 {
            -webkit-animation-delay: 0s;
            -moz-animation-delay: 0s;
            -ms-animation-delay: 0s;
            animation-delay: 0s;
        }
        .animation-text-container h2.frame-2 {
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -ms-animation-delay: 3s;
            animation-delay: 3s;
        }
        .animation-text-container h2.frame-3 {
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -ms-animation-delay: 6s;
            animation-delay: 6s;
        }
        .animation-text-container h2.frame-4 {
            font-size: 6em;
            -webkit-animation-delay: 9s;
            -moz-animation-delay: 9s;
            -ms-animation-delay: 9s;
            animation-delay: 9s;
        }
        .animation-text-container h2.frame-5 {
            -webkit-animation: none;
            -moz-animation: none;
            -ms-animation: none;
            animation: none;
            color: transparent;
            text-shadow: 0px 0px 1px #fff;
        }
        .animation-text-container h2.frame-5 span {
            -webkit-animation: blurFadeIn 3s ease-in 12s backwards;
            -moz-animation: blurFadeIn 1s ease-in 12s backwards;
            -ms-animation: blurFadeIn 3s ease-in 12s backwards;
            animation: blurFadeIn 3s ease-in 12s backwards;
            color: transparent;
            text-shadow: 0px 0px 1px #fff;
        }
        .animation-text-container h2.frame-5 span:nth-child(2) {
            -webkit-animation-delay: 13s;
            -moz-animation-delay: 13s;
            -ms-animation-delay: 13s;
            animation-delay: 13s;
        }
        .animation-text-container h2.frame-5 span:nth-child(3) {
            -webkit-animation-delay: 14s;
            -moz-animation-delay: 14s;
            -ms-animation-delay: 14s;
            animation-delay: 14s;
        }
        
        
        /* keyframes */
        @-webkit-keyframes blurFadeInOut{
            0%{
                opacity: 0;
                text-shadow: 0px 0px 40px #fff;
                -webkit-transform: scale(1.3);
            }
            20%,75%{
                opacity: 1;
                text-shadow: 0px 0px 1px #fff;
                -webkit-transform: scale(1);
            }
            100%{
                opacity: 0;
                text-shadow: 0px 0px 50px #fff;
                -webkit-transform: scale(0);
            }
        }
        @-webkit-keyframes blurFadeIn{
            0%{
                opacity: 0;
                text-shadow: 0px 0px 40px #fff;
                -webkit-transform: scale(1.3);
            }
            50%{
                opacity: 0.5;
                text-shadow: 0px 0px 10px #fff;
                -webkit-transform: scale(1.1);
            }
            100%{
                opacity: 1;
                text-shadow: 0px 0px 1px #fff;
                -webkit-transform: scale(1);
            }
        }
        @-webkit-keyframes fadeInBack{
            0%{
                opacity: 0;
                -webkit-transform: scale(0);
            }
            50%{
                opacity: 0.4;
                -webkit-transform: scale(2);
            }
            100%{
                opacity: 0.2;
                -webkit-transform: scale(5);
            }
        }
        
        /**/
        @-moz-keyframes blurFadeInOut{
            0%{
                opacity: 0;
                text-shadow: 0px 0px 40px #fff;
                -moz-transform: scale(1.3);
            }
            20%,75%{
                opacity: 1;
                text-shadow: 0px 0px 1px #fff;
                -moz-transform: scale(1);
            }
            100%{
                opacity: 0;
                text-shadow: 0px 0px 50px #fff;
                -moz-transform: scale(0);
            }
        }
        @-moz-keyframes blurFadeIn{
            0%{
                opacity: 0;
                text-shadow: 0px 0px 40px #fff;
                -moz-transform: scale(1.3);
            }
            100%{
                opacity: 1;
                text-shadow: 0px 0px 1px #fff;
                -moz-transform: scale(1);
            }
        }
        @-moz-keyframes fadeInBack{
            0%{
                opacity: 0;
                -moz-transform: scale(0);
            }
            50%{
                opacity: 0.4;
                -moz-transform: scale(2);
            }
            100%{
                opacity: 0.2;
                -moz-transform: scale(5);
            }
        }
        
        /**/
        @keyframes blurFadeInOut{
            0%{
                opacity: 0;
                text-shadow: 0px 0px 40px #fff;
                transform: scale(1.3);
            }
            20%,75%{
                opacity: 1;
                text-shadow: 0px 0px 1px #fff;
                transform: scale(1);
            }
            100%{
                opacity: 0;
                text-shadow: 0px 0px 50px #fff;
                transform: scale(0);
            }
        }
        @keyframes blurFadeIn{
            0%{
                opacity: 0;
                text-shadow: 0px 0px 40px #fff;
                transform: scale(1.3);
            }
            50%{
                opacity: 0.5;
                text-shadow: 0px 0px 10px #fff;
                transform: scale(1.1);
            }
            100%{
                opacity: 1;
                text-shadow: 0px 0px 1px #fff;
                transform: scale(1);
            }
        }
        @keyframes fadeInBack{
            0%{
                opacity: 0;
                transform: scale(0);
            }
            50%{
                opacity: 0.4;
                transform: scale(2);
            }
            100%{
                opacity: 0.2;
                transform: scale(5);
            }
        } 
        /* Small Devices, Tablets */
        @media only screen and (max-width : 767px) {
                .animation-text-container { 
                        height:240px; 
                }
                .animation-text-container h2 { 
                        font-size: 30px; 
                        line-height:38px; 
                        margin-top: -19px; 
                } 
        } 
</style>