HTML CSS Text typing animation effects in English
In this chapter, we will know how you can display animation typing text in webpage with the help of html and css.
Example 1.1
After running this code, the text in the web page is displayed as type, left to right type. In this, after the text is displayed, all the text is removed simultaneously.
|
<!DOCTYPE html> <html> <head> <title>amcodestar </title> <style> * { margin:0; padding:0; } body{ display: flex; align-items: center; min-height: 100vh; } h1 { animation: type 3s steps(15) infinite; font-size: 8em; overflow: hidden; font-family: consolas; border-right:4px solid black; width:15ch; } @keyframes type { 0% { width:0ch; } 100% { width:15ch; } } </style> </head> <body> <h1>AMCODESTAR .COM</h1> </body> </html> |
Output
Example 1.2
After running this code, the text in the web page is displayed as type, left to right type. But after displaying text in it, one character gets right to left remove.
|
<!DOCTYPE html> <html> <head> <title>amcodestar</title> <style> * { margin:0; padding:0; } body{ display: flex; align-items: center; min-height: 100vh; } h1 { animation: type 3s steps(15) infinite; font-size: 8em; overflow: hidden; font-family: consolas; border-right:4px solid black; width:15ch; } @keyframes type { 50% { width:0ch; } 100% { width:15ch; } } </style> </head> <body> <h1>AMCODESTAR .COM</h1> </body> </html> |
Output
Example 1.3
The above example has the same text show and hide. In this example, we will know how to display another text web page after the text is hidden.
|
<!DOCTYPE html> <html> <head> <title> amcodestar </title> <style> *{ margin: 0; padding: 0; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; } {.div1 display: flex; } .div1 .div2{ font-size: 8em; margin-top: -30px; } .div1 .text{ height: 90px; line-height: 90px; overflow: hidden; } .text li{ color: red; font-size: 8em; position: relative; top: 0; animation: slide 12s steps(4) infinite; } @keyframes slide { 100%{ top: -360px; } } .text li span{ position: relative; line-height: 90px; } .text li span::after{ content: ""; position: absolute; left: 0; height: 120%; width: 100%; background:white; animation: typing 3s steps(10) infinite; } @keyframes typing { 70%{ left: calc(100%); } } </style> </head> <body> <div class="div1"> <div class="div2"> AMCODE</div> <ul class="text"> <li><span>STAR.COM </span></li> <li><span>HTML </span></li> <li><span>CSS </span></li> <li><span>HTML+CSS </span></li> </ul> </div> </body> </html> |
Output
