Online HTML Editor
RUN CODE
❯
(shift+enter)
Learn HTML
<!DOCTYPE html> <html> <head> <style> .bounce { height: 50px; overflow: hidden; position: relative; background: #fefefe; color: #333; border: 1px solid #4a4a4a; } .bounce p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; -moz-transform: translateX(50%); -webkit-transform: translateX(50%); transform: translateX(50%); -moz-animation: bouncing-text 5s linear infinite alternate; -webkit-animation: bouncing-text 5s linear infinite alternate; animation: bouncing-text 10s linear infinite alternate; } @-moz-keyframes bouncing-text { 0% { -moz-transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); } } @-webkit-keyframes bouncing-text { 0% { -webkit-transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); } } @keyframes bouncing-text { 0% { -moz-transform: translateX(50%); -webkit-transform: translateX(50%); transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } } </style> </head> <body> <div class="bounce"> <p> Bouncy Marquee </p> </div> </body> </html>