how to add a scrolliong image in html

Solutions on MaxInterview for how to add a scrolliong image in html by the best coders in the world

showing results for - "how to add a scrolliong image in html"
Elisa
23 May 2017
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>