CSS text effect style : demo 166

Best jQuery

HTML

                        
Best jQuery

CSS

(Fonts required : Mochiy Pop One)
                    .text-effect{
                        color: transparent;
                        font-family: 'Mochiy Pop One', sans-serif;
                        font-size: 100px;
                        font-weight: 700;
                        text-align: center;
                        -webkit-text-stroke: 2px #b03969;
                        -moz-text-stroke: 2px #b03969;
                        text-stroke: 2px #b03969;
                        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                    }
                    .text-effect span{
                        display: inline-block;
                        animation: animate 2s ease-in-out forwards infinite;
                    }
                    .text-effect span:nth-child(1) { animation-delay: 0.1s; }
                    .text-effect span:nth-child(2) { animation-delay: 0.2s; }
                    .text-effect span:nth-child(3) { animation-delay: 0.3s;}
                    .text-effect span:nth-child(4) { animation-delay: 0.4s; }
                    .text-effect span:nth-child(5) { animation-delay: 0.5s; }
                    .text-effect span:nth-child(6) { animation-delay: 0.6s; }
                    .text-effect span:nth-child(7) { animation-delay: 0.7s; }
                    .text-effect span:nth-child(8) { animation-delay: 0.8s; }
                    .text-effect span:nth-child(9) { animation-delay: 0.9s; }
                    .text-effect span:nth-child(10){ animation-delay: 1s; }
                    @keyframes animate{
                        100%{
                            color: #b03969;
                            text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                            -webkit-text-stroke: 2px transparent;
                            -moz-text-stroke: 2px transparent;
                            text-stroke: 2px transparent;
                            transform: scale(1.2);
                        }
                    }
                    @media only screen and (max-width: 990px){
                        .text-effect{ font-size: 80px; }
                    }
                    @media only screen and (max-width: 767px){
                        .text-effect{ font-size: 60px; }
                    }
                    @media only screen and (max-width: 576px){
                        .text-effect{ font-size: 45px; }
                    }
                    
License Terms