HTML CSS examples for CSS Animation:Text
Change letter in animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w ww . j a v a2 s .c om--> font-family:'Courier New', 'Courier', 'Arial', Serif; text-align: center; font-size: 12pt; } .alien { width: 30px; height: 50px; position: relative; top: 50%; transform: translateY(-50%); margin-left: auto; margin-right: auto; } .rw-wrapper { position: relative; font-size: 12pt; } .rw-words { display: inline; } .rw-words span { position: absolute; opacity: 0; overflow: hidden; } .rw-words-1 span { animation: rotateWordsFirst 0.3s linear 0s infinite; left: 11px; top: 2px; } .rw-words span:nth-child(2) { animation-delay: 0.2s; } .rw-words span:nth-child(3) { animation-delay: 0.4s; } .rw-words span:nth-child(4) { animation-delay: 0.6s; } .rw-words span:nth-child(5) { animation-delay: 0.8s; } .rw-words span:nth-child(6) { animation-delay: 0.9s; } @keyframes rotateWordsFirst { 0% { opacity: 1; animation-timing-function: linear; height: 0px; } 95% { opacity: 1; } 98% { opacity: 0; } } </style> </head> <body> <div class="alien"> <span>\ /</span> <span>.</span> <section class="rw-wrapper"> <div class="rw-sentence"> <div class="rw-words rw-words-1"> <span>0</span> <span>o</span> </div> </div> </section> </div> </body> </html>