text sliding loop effect html

Solutions on MaxInterview for text sliding loop effect html by the best coders in the world

showing results for - "text sliding loop effect html"

12 Feb 2017

1<!DOCTYPE html>
2<title>Example</title>
3
4<!-- Styles --> 
5<style>
6.example1 {
7 height: 50px;  
8 overflow: hidden;
9 position: relative;
10}
11.example1 h3 {
12 font-size: 3em;
13 color: blue;
14 position: absolute;
15 width: 100%;
16 height: 100%;
17 margin: 0;
18 line-height: 50px;
19 text-align: center;
20 /* Starting position */
21 -moz-transform:translateX(100%);
22 -webkit-transform:translateX(100%);  
23 transform:translateX(100%);
24 /* Apply animation to this element */  
25 -moz-animation: example1 15s linear infinite;
26 -webkit-animation: example1 15s linear infinite;
27 animation: example1 15s linear infinite;
28}
29/* Move it (define the animation) */
30@-moz-keyframes example1 {
31 0%   { -moz-transform: translateX(100%); }
32 100% { -moz-transform: translateX(-100%); }
33}
34@-webkit-keyframes example1 {
35 0%   { -webkit-transform: translateX(100%); }
36 100% { -webkit-transform: translateX(-100%); }
37}
38@keyframes example1 {
39 0%   { 
40 -moz-transform: translateX(100%); /* Firefox bug fix */
41 -webkit-transform: translateX(100%); /* Firefox bug fix */
42 transform: translateX(100%);     
43 }
44 100% { 
45 -moz-transform: translateX(-100%); /* Firefox bug fix */
46 -webkit-transform: translateX(-100%); /* Firefox bug fix */
47 transform: translateX(-100%); 
48 }
49}
50</style>
51
52<!-- HTML --> 
53<div class="example1">
54<h3>This is the scrolling text </h3>
55</div>