CSS text effect style : demo 197

                        

                            Best
                            jQuery
                        
                    

                    .text-effect{
                        color: #fffafa;
                        font-family: 'Alfa Slab One', cursive;
                        font-size: 100px;
                        font-weight: 700;
                        text-align: center;
                        transition: all .3s ease-in-out;
                    }
                    .text-effect span{ display: inline-block; }
                    .text-effect span:nth-child(2n){ color:#7a51bb; }
                    .text-effect span:nth-child(1){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 2s infinite;
                    }
                    .text-effect span:nth-child(2){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) .2s both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 2.2s infinite;
                    }
                    .text-effect span:nth-child(3){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) .4s both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 2.4s infinite;
                    }
                    .text-effect span:nth-child(4){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) .6s both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 2.6s infinite;
                    }
                    .text-effect span:nth-child(5){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) .8s both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 2.8s infinite;
                    }
                    .text-effect span:nth-child(6){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) 1s both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 3s infinite;
                    }
                    .text-effect span:nth-child(7){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) 1.2s both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 3.2s infinite;
                    }
                    .text-effect span:nth-child(8){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) 1.4s both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 3.4s infinite;
                    }
                    .text-effect span:nth-child(9){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) 1.6s both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 3.6s infinite;
                    }
                    .text-effect span:nth-child(10){
                        animation: flipUp 1s cubic-bezier(0.6, -10, 0.25, 1.55) 1.8s both,
                                flipDown .5s cubic-bezier(0.45, 0.03, 0.51, 0.95) 3.8s infinite;
                    }
                    @keyframes flipUp{
                        from{ transform: rotateX(90deg); }
                        to{ transform: rotateX(0deg); }
                    }
                    @keyframes flipDown{
                        to{ transform: rotateX(-180deg); }
                    }
                    @media only screen and (max-width: 990px){
                        .text-effect{ font-size: 70px; }
                    }
                    @media only screen and (max-width: 767px){
                        .text-effect{ font-size: 60px; }
                    }
                    @media only screen and (max-width: 576px){
                        .text-effect{ font-size: 35px; }
                    }