HTML CSS examples for CSS Animation:Text
Horizontally centering text in CSS animations
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from ww w .java 2 s. c o m--> margin: 0; } .container { height: 100vh; text-align: center; background: linear-gradient(to right, red 0%, #ffffff 50%, #7db9e8 100%); } .container h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; margin: 0; white-space: nowrap; } .container h2:nth-child(1) { animation: rotateWord 12s linear infinite 0s; } .container h2:nth-child(2) { animation: rotateWord 12s linear infinite 3s; } .container h2:nth-child(3) { animation: rotateWord 12s linear infinite 6s; } .container h2:nth-child(4) { animation: rotateWord 12s linear infinite 9s; } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translate(-50%, -30px); } 5% { opacity: 1; transform: translate(-50%, 0px); } 17% { opacity: 1; transform: translate(-50%, 0px); } 20% { opacity: 0; transform: translate(-50%, 30px); } 80% { opacity: 0; } 100% { opacity: 0; } } </style> </head> <body> <div class="container"> <h2>this is a test</h2> <h2>this is a test</h2> <h2>this is a test</h2> <h2>this is a test</h2> </div> </body> </html>