CSS text effect style : demo 71

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Fredoka One)
                        .demo{ overflow: hidden; }
                        .text-effect{
                            font-family: 'Fredoka One', cursive;
                            font-size: 100px;
                            font-weight: 400;
                            text-align: center;
                            animation: anime_style 3.5s infinite linear;
                        }
                        @keyframes anime_style{
                            0%{ color: #EA2027; }
                            10%{
                                color: #EE5A24;
                                transform: scale(1.1, 1.1);
                            }
                            20%{
                                color: #F79F1F;
                                text-shadow: 0px 0px transparent, 1px 1px #e7e7e7, 2px 2px #e7e7e7, 3px 3px #e7e7e7, 
                                    4px 4px #e7e7e7, 5px 5px #e7e7e7, 6px 6px #e7e7e7, 7px 7px #e7e7e7, 8px 8px #e7e7e7, 
                                    9px 9px #e7e7e7, 10px 10px #e7e7e7, 11px 11px #e7e7e7, 12px 12px #e7e7e7, 
                                    13px 13px #e7e7e7, 14px 14px #e7e7e7, 15px 15px #e7e7e7, 16px 16px #e7e7e7, 
                                    17px 17px #e7e7e7, 18px 18px #e7e7e7, 19px 19px #e7e7e7, 20px 20px #e7e7e7, 
                                    21px 21px #e7e7e7, 22px 22px #e7e7e7, 23px 23px #e7e7e7, 24px 24px #e7e7e7, 25px 25px #e7e7e7, 
                                    26px 26px #e7e7e7, 27px 27px #e7e7e7, 28px 28px #e7e7e7, 29px 29px #e7e7e7, 30px 30px #e7e7e7, 
                                    31px 31px #e7e7e7, 32px 32px #e7e7e7, 33px 33px #e7e7e7, 34px 34px #e7e7e7, 35px 35px #e7e7e7, 
                                    36px 36px #e7e7e7, 37px 37px #e7e7e7, 38px 38px #e7e7e7, 39px 39px #e7e7e7, 40px 40px #e7e7e7, 
                                    41px 41px #e7e7e7, 42px 42px #e7e7e7, 43px 43px #e7e7e7, 44px 44px #e7e7e7, 45px 45px #e7e7e7, 
                                    46px 46px #e7e7e7, 47px 47px #e7e7e7, 48px 48px #e7e7e7, 49px 49px #e7e7e7, 50px 50px #e7e7e7;
                                transform: scale(1.2, 1.2);
                            }
                            30%{
                                color: #009432;
                                transform: scale(1.3, 1.3);
                            }
                            40%{
                                color: #0652DD;
                                transform: scale(1.4, 1.4);
                            }
                            50%{
                                color: #1B1464;
                                text-shadow: 0px 0px transparent, -1px 1px #e7e7e7, -2px 2px #e7e7e7, -3px 3px #e7e7e7, 
                                    -4px 4px #e7e7e7, -5px 5px #e7e7e7, -6px 6px #e7e7e7, -7px 7px #e7e7e7, -8px 8px #e7e7e7, 
                                    -9px 9px #e7e7e7, -10px 10px #e7e7e7, -11px 11px #e7e7e7, -12px 12px #e7e7e7, 
                                    -13px 13px #e7e7e7, -14px 14px #e7e7e7, -15px 15px #e7e7e7, -16px 16px #e7e7e7, 
                                    -17px 17px #e7e7e7, -18px 18px #e7e7e7, -19px 19px #e7e7e7, -20px 20px #e7e7e7, 
                                    -21px 21px #e7e7e7, -22px 22px #e7e7e7, -23px 23px #e7e7e7, -24px 24px #e7e7e7, -25px 25px #e7e7e7, 
                                    -26px 26px #e7e7e7, -27px 27px #e7e7e7, -28px 28px #e7e7e7, -29px 29px #e7e7e7, -30px 30px #e7e7e7, 
                                    -31px 31px #e7e7e7, -32px 32px #e7e7e7, -33px 33px #e7e7e7, -34px 34px #e7e7e7, -35px 35px #e7e7e7, 
                                    -36px 36px #e7e7e7, -37px 37px #e7e7e7, -38px 38px #e7e7e7, -39px 39px #e7e7e7, -40px 40px #e7e7e7, 
                                    -41px 41px #e7e7e7, -42px 42px #e7e7e7, -43px 43px #e7e7e7, -44px 44px #e7e7e7, -45px 45px #e7e7e7, 
                                    -46px 46px #e7e7e7, -47px 47px #e7e7e7, -48px 48px #e7e7e7, -49px 49px #e7e7e7, -50px 50px #e7e7e7;
                                transform: scale(1.5, 1.5);
                            }
                            60%{
                                color: #6F1E51;
                                transform: scale(1.4, 1.4);
                            }
                            70%{
                                color: #B53471;
                                transform: scale(1.3, 1.3);
                            }
                            80%{
                                color: #ED4C67;
                                transform: scale(1.2, 1.2);
                            }
                            90%{
                                color: #EE5A24;
                                transform: scale(1.1, 1.1);
                            }
                            100%{
                                color: #EA2027;
                                transform: scale(1, 1);
                            }
                        }
                        @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: 40px; }
                        }
                        @media only screen and (max-width: 479px){
                            .text-effect{ font-size: 40px; }
                        }
                    
License Terms