HTML CSS examples for CSS Animation:Text
Auto typing animation
<html> <head> <title>OS Animation Typewriter</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .css-typing {<!-- w ww . ja v a 2 s . c o m--> width: 0; white-space: nowrap; overflow: hidden; -webkit-animation: type 3s steps(50, end); animation: type 3s steps(55, end); -o-animation: type 5s steps(50, end); -moz-animation: type 3s steps(55, end); -webkit-animation-delay: 5s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes type { from { width: 0; } to { width: 360px; } } @-moz-keyframes type { from { width: 0; } } @-webkit-keyframes type { from { width: 0; } } </style> </head> <body> <div class="css-typing"> This text will pop up using an typewriting effect </div> </body> </html>