Salve,
stò provando a sostituire il tag marquee con uno stile css3.
Cercando sul web ho trovato un codice abbastanza semplice che funziona.
Il mio problema è che nella stessa pagina devono stare 2 div di cui uno deve scorrere verso sinistra e l'altro verso l'altro.
Di seguito il codice che stò usando:
codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<!-- <link href="real-world.css" rel="stylesheet" type="text/css">  -->
</head>
<body>
<style>
.marquee-sinistra {
    height: 40px;
    
    overflow: hidden;
    position: relative;
}
    .marquee-sinistra div {
        display: block;
        width: 200%;
        height: 40px;
        
        position: absolute;
        overflow: hidden;
        
        -webkit-animation: marquee 4s linear infinite;
        -moz-animation: marquee 4s linear infinite;
        -ms-animation: marquee 4s linear infinite;
        -o-animation: marquee 4s linear infinite;
        animation: marquee 4s linear infinite;
    }
    .marquee span {
        float: left;
        width: 50%;
    }
.marquee-sinistra div:hover {
 
    -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
 -moz-animation-play-state: paused;
 -ms-animation-play-state: paused;
 -o-animation-play-state: paused;
    animation-play-state: paused;
 }
 
@-webkit-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@-moz-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@-ms-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@-o-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
.marquee-su {
    height: 40px;
    
    overflow: hidden;
    position: relative;
}
    .marquee-su div {
        display: block;
        width: 200%;
        height: 40px;
        
        position: absolute;
        overflow: hidden;
        
        -webkit-animation: marquee 4s linear infinite;
        -moz-animation: marquee 4s linear infinite;
        -ms-animation: marquee 4s linear infinite;
        -o-animation: marquee 4s linear infinite;
        animation: marquee 4s linear infinite;
    }
    .marquee span {
        float: left;
        width: 50%;
    }
.marquee-su div:hover {
 
    -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
 -moz-animation-play-state: paused;
 -ms-animation-play-state: paused;
 -o-animation-play-state: paused;
    animation-play-state: paused;
 }
@-webkit-keyframes marquee-su {
    0% { top: 0; }
    100% { top: -100%; }
}
@-moz-keyframes marquee-su {
    0% { top: 0; }
    100% { top: -100%; }
}
@-ms-keyframes marquee-su {
    0% { top: 0; }
    100% { top: -100%; }
}
@-o-keyframes marquee-su {
    0% { top: 0; }
    100% { top: -100%; }
}
@keyframes marquee-su {
    0% { top: 0; }
    100% { top: -100%; }
}
</style>
<div class="marquee-sinistra">
  <div>
    <span>You spin me right round, baby. Like a record, baby.</span><br>
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
</div>
<div class="marquee-su">
  <div>
    <span>You spin me right round, baby. Like a record, baby.</span><br>
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
</div>
</body>
</html>
 se provate a far interpretare questo codice dal browser vedrete che i 2 div scorrono nella stessa direzione.
Come posso risolvere?
grazie.