1<style style="text/css">
2 .scroll-left {
3 height: 100px;
4 overflow: hidden;
5 position: relative;
6 }
7
8 .scroll-left .inner {
9 position: absolute;
10 width: 100%;
11 height: 100%;
12 margin: 0;
13 line-height: 50px;
14 text-align: center;
15 /* Starting position */
16 -moz-transform: translateX(100%);
17 -webkit-transform: translateX(100%);
18 transform: translateX(100%);
19 /* Apply animation to this element */
20 -moz-animation: scroll-left 15s linear infinite;
21 -webkit-animation: scroll-left 15s linear infinite;
22 animation: scroll-left 15s linear infinite;
23 }
24 /* Move it (define the animation) */
25 @-moz-keyframes scroll-left {
26 0% {
27 -moz-transform: translateX(100%);
28 }
29
30 100% {
31 -moz-transform: translateX(-100%);
32 }
33 }
34
35 @-webkit-keyframes scroll-left {
36 0% {
37 -webkit-transform: translateX(100%);
38 }
39
40 100% {
41 -webkit-transform: translateX(-100%);
42 }
43 }
44
45 @keyframes scroll-left {
46 0% {
47 -moz-transform: translateX(100%); /* Browser bug fix */
48 -webkit-transform: translateX(100%); /* Browser bug fix */
49 transform: translateX(100%);
50 }
51
52 100% {
53 -moz-transform: translateX(-100%); /* Browser bug fix */
54 -webkit-transform: translateX(-100%); /* Browser bug fix */
55 transform: translateX(-100%);
56 }
57 }
58 </style>
59
60 <div class="scroll-left">
61 <div class="inner">
62 <img src="you'r gif/image here" width="100" alt="scrolling gif or image">
63 </div>
64 </div>