CSS text effect style : demo 235

                        

                            Best jQuery
                        
                    

                        :root{ --color1:#ff5a08; }
                        .text-effect{
                            color: var(--color1);
                            font-family: "ADLaM Display", system-ui;
                            font-size: 100px;
                            font-weight: 500;
                            text-align: center;
                            overflow: hidden;
                            position: relative;
                        }
                        .text-effect span{
                            display: inline-block;
                            animation: animate 2s infinite;
                        }
                        @keyframes animate{
                            0%, 10% { transform: perspective(200px) rotateX(0deg) rotateY(0deg) scale(1); }
                            30%, 36% { transform: perspective(200px) rotateX(180deg) rotateY(0deg) scale(1); }
                            63%, 69% { transform: perspective(200px) rotateX(180deg) rotateY(180deg) scale(1); }
                            90%, 100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg) scale(-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; }
                        }