html image scroll with page code example

Example: how to add a scrolliong image in html

<style style="text/css">
            .scroll-left {
                height: 100px;
                overflow: hidden;
                position: relative;
            }

                .scroll-left .inner {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    line-height: 50px;
                    text-align: center;
                    /* Starting position */
                    -moz-transform: translateX(100%);
                    -webkit-transform: translateX(100%);
                    transform: translateX(100%);
                    /* Apply animation to this element */
                    -moz-animation: scroll-left 15s linear infinite;
                    -webkit-animation: scroll-left 15s linear infinite;
                    animation: scroll-left 15s linear infinite;
                }
            /* Move it (define the animation) */
            @-moz-keyframes scroll-left {
                0% {
                    -moz-transform: translateX(100%);
                }

                100% {
                    -moz-transform: translateX(-100%);
                }
            }

            @-webkit-keyframes scroll-left {
                0% {
                    -webkit-transform: translateX(100%);
                }

                100% {
                    -webkit-transform: translateX(-100%);
                }
            }

            @keyframes scroll-left {
                0% {
                    -moz-transform: translateX(100%); /* Browser bug fix */
                    -webkit-transform: translateX(100%); /* Browser bug fix */
                    transform: translateX(100%);
                }

                100% {
                    -moz-transform: translateX(-100%); /* Browser bug fix */
                    -webkit-transform: translateX(-100%); /* Browser bug fix */
                    transform: translateX(-100%);
                }
            }
        </style>

        <div class="scroll-left">
            <div class="inner">
                <img src="you'r gif/image here" width="100" alt="scrolling gif or image">
            </div>
        </div>

Tags:

Html Example