CSS text effect style : demo 123

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Nunito)
                    .text-effect{
                        color: #000;
                        font-family: 'Rancho', cursive;
                        font-size: 100px;
                        text-align: center;
                        animation: 2s anim-popoutin ease infinite;
                    }
                    @keyframes anim-popoutin{
                        0%{
                            color: #000;
                            text-shadow: 0 0 0 rgba(0, 0, 0, 0);
                            opacity: 0;
                            transform: scale(0);
                        }
                        25%{
                            color: red;
                            text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
                            opacity: 1;
                            transform: scale(1.2);
                        }
                        50%{
                            color: #000;
                            text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
                            opacity: 1;
                            transform: scale(1);
                        }
                        100%{
                            text-shadow:1px 0 0 rgba(0, 0, 0, 0);
                            opacity: 1;
                            transform: scale(1);
                        }
                    }
                    @media only screen and (max-width: 990px){
                        .text-effect{ font-size: 90px; }
                    }
                    @media only screen and (max-width: 767px){
                        .text-effect{ font-size: 65px; }
                    }
                    @media only screen and (max-width: 576px){
                        .text-effect{ font-size: 50px; }
                    }
                    @media only screen and (max-width: 479px){
                        .text-effect{
                            font-size: 38px;
                            line-height: 35px;
                        }
                    }
                    
License Terms