Text style 2

.text-effect{ font-family: 'Amaranth', sans-serif; text-align: center; text-transform: uppercase; margin: 0 auto; } .text-effect span{ color: #f53b57; font-size: 100px; text-shadow: 1px 1px 1px rgba(0,0,0,.8); display: inline-block; animation: iBounce 2.2s ease infinite; } .text-effect span:nth-child(even){ color: #3c40c6; } .text-effect span:nth-child(1){ animation-delay: 0s; } .text-effect span:nth-child(2){ animation-delay: .2s; } .text-effect span:nth-child(3){ animation-delay: .4s; } .text-effect span:nth-child(4){ animation-delay: .6s; } .text-effect span:nth-child(5){ animation-delay: .8s; } .text-effect span:nth-child(6){ animation-delay: 1s; } .text-effect span:nth-child(7){ animation-delay: 1.3s; } .text-effect span:nth-child(8){ animation-delay: 1.5s; } .text-effect span:nth-child(9){ animation-delay: 1.7s; } .text-effect span:nth-child(10){ animation-delay: 1.9s; } @keyframes iBounce{ 0%, 100%, 15%, 30%, 45%{ transform: translateY(0); } 10%{ transform: translateY(-30px); } 25%{ transform: translateY(-20px); } 40%{ transform: translateY(-10px); } } @media only screen and (max-width: 990px){ .text-effect span{ font-size: 65px; } } @media only screen and (max-width: 767px){ .text-effect span{ font-size: 50px; } } @media only screen and (max-width: 479px){ .text-effect span{ font-size: 36px; } } @media only screen and (max-width: 359px){ .text-effect span{ font-size: 27px; } }

Text with the bouncy effects is seen on a modern website. The CSS has changed the way we see the text, with the effects, added we feel the text than just reading it. This is one of the happy bouncy effects where each letter is separated with a tag in HTML script. The CSS makes it look bold and colorful along with the bouncy effect added to it. Each element here is a bounce for 2.2sec, the delay in the bouncy effect makes each letter bounce after the scheduled time. The @keyframes settings set the actual bouncy effect with the percentage translated to the pixels. The media screen is set to display the size of font accordingly. These effects are catchy and attention seeker can be easily used in the web applications. For different browsers, the distribution of the pixels may differ and you need to test these effect on different types of browsers.

Text style 2

Post Comment or Questions Cancel reply

Several Related Snippets