Web.QHMIT
.com
Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!DOCTYPE html> <title>Example</title> <!-- Styles --> <style> .example3 { height: 200px; overflow: hidden; position: relative; } .example3 h3 { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateY(-100%); -webkit-transform:translateY(-100%); transform:translateY(-100%); /* Apply animation to this element */ -moz-animation: example3 15s linear infinite; -webkit-animation: example3 15s linear infinite; animation: example3 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes example3 { 0% { -moz-transform: translateY(-100%); } 100% { -moz-transform: translateY(100%); } } @-webkit-keyframes example3 { 0% { -webkit-transform: translateY(-100%); } 100% { -webkit-transform: translateY(100%); } } @keyframes example3 { 0% { -moz-transform: translateY(-100%); /* Firefox bug fix */ -webkit-transform: translateY(-100%); /* Firefox bug fix */ transform: translateY(-100%); } 100% { -moz-transform: translateY(100%); /* Firefox bug fix */ -webkit-transform: translateY(100%); /* Firefox bug fix */ transform: translateY(100%); } } </style> <!-- HTML --> <div class="example3"> <h3>Scrolling down... </h3> </div>
Preview