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>
