/* gestione scroll testo A: 100% */ .scroll-left-a { height: 1.5em; overflow: hidden; position: relative; width: 100%; white-space: nowrap; } .scroll-left-a span { /*display: inline-block;*/ position: absolute; width: 100%; height: 100%; margin: 0; line-height: 1.5em; /* Starting position */ -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); /* Apply animation to this element */ -moz-animation: scroll-left-a 8s ease infinite; -webkit-animation: scroll-left-a 8s ease infinite; animation: scroll-left-a 8s ease infinite; } /* Move it (define the animation) */ @keyframes scroll-left-a { 0% { transform: translateX(-50%); } 30% { transform: translateX(-50%); } 80% { transform: translateX(-80%); } } /* gestione scroll testo B: 120% */ .scroll-left-b { height: 1.5em; overflow: hidden; position: relative; width: 100%; white-space: nowrap; } .scroll-left-b span { /*display: inline-block;*/ position: absolute; width: 100%; height: 100%; margin: 0; line-height: 1.5em; /* Starting position */ -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); /* Apply animation to this element */ -moz-animation: scroll-left-b 8s ease infinite; -webkit-animation: scroll-left-b 8s ease infinite; animation: scroll-left-b 8s ease infinite; } /* Move it (define the animation) */ @keyframes scroll-left-b { 0% { transform: translateX(-50%); } 30% { transform: translateX(-50%); } 80% { transform: translateX(-120%); } } /* gestione scroll testo C: 150% */ .scroll-left-c { height: 1.5em; overflow: hidden; position: relative; width: 100%; white-space: nowrap; } .scroll-left-c span { /*display: inline-block;*/ position: absolute; width: 100%; height: 100%; margin: 0; line-height: 1.5em; /* Starting position */ -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); /* Apply animation to this element */ -moz-animation: scroll-left-c 8s ease infinite; -webkit-animation: scroll-left-c 8s ease infinite; animation: scroll-left-c 8s ease infinite; } /* Move it (define the animation) */ @keyframes scroll-left-c { 0% { transform: translateX(-50%); } 30% { transform: translateX(-50%); } 80% { transform: translateX(-150%); } }