problema con marquee

[cardi_simo]

ho creato un marquee ma non riesco a capire perchè non mi legge il 3

questo è il codice html

<!-- inizio notizie --><div class="tickertape">        <strong class="title">Notizie</strong>        <span class="marquee"><span><strong>1:</strong> 1</span><span><strong>2</strong> 2</span><span><strong>3:</strong> 3</span></span></div>    <!--fine notizie-->

questo il css

[CSS]
/* new del sito */



.hideText {
text-indent: -999em;
letter-spacing: -999em;
overflow: hidden;
}


*,
a:focus {
outline: none !important;
}
button:focus {
outline: none !important;
}


#content {
margin: 0 !important;
padding: 0 !important;
}
#tlyPageGuideWrapper,
.filter-bar {
display: none !important;
}


.table td,
.table th {
vertical-align: middle;
}
.table th {
padding: 3px;
text-align: center;
}
.table img {
float: left;
}
}


.widget-messages ul li .glyphicons.single.bin i:before {
color: #cccccc;
position: relative;
line-height: 20px;
left: auto;
top: auto;
}
.widget-messages ul li:last-child {
margin: 0;
}
.tickertape {
height: 32px;
line-height: 32px;
padding: 0 10px 0 0;
position: relative;
margin: 0 0 15px;
background-color: #f9f9f9;
background-image: -moz-linear-gradient(top, #fdfdfd, #f4f4f4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdfdfd), to(#f4f4f4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #f4f4f4);
background-image: -o-linear-gradient(top, #fdfdfd, #f4f4f4);
background-image: linear-gradient(to bottom, #fdfdfd, #f4f4f4);
background-repeat: repeat-x;
filter: progidXImageTransform.Microsoft.gradient(startColorstr=' #fffdfdfd', endColorstr='#fff4f4f4', GradientType=0);
border: 1px solid #d8d8d8;
color: #7c7c7c;
box-shadow: 0 1px 0 0 #f7f7f7, 0 5px 4px -4px #d8d8d8;
-moz-box-shadow: 0 1px 0 0 #f7f7f7, 0 5px 4px -4px #d8d8d8;
-webkit-box-shadow: 0 1px 0 0 #f7f7f7, 0 5px 4px -4px #d8d8d8;
}
.tickertape .title {
padding: 0 10px;
float: left;
width: 80px;
display: block;
position: absolute;
top: 0;
left: 0;
height: 32px;
}


.tickertape .marquee {
height: 20px;
line-height: 20px;
font-size: 11px;
background: #ffffff;
border: 1px solid #d8d8d8;
box-shadow: -2px 0 5px -4px #d8d8d8 inset, 2px 0 5px -4px #d8d8d8 inset;
padding: 0 5px;
display: block;
margin-left: 90px;
margin-top: 6px;
overflow: hidden;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.tickertape .marquee span {
display: block;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
white-space: nowrap;
text-align: center;
transform: translateX(100%);
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
}
.tickertape .marquee span:nth-child(1) {
animation: marquee-one 20s ease infinite;
-moz-animation: marquee-one 20s ease infinite;
-webkit-animation: marquee-one 20s ease infinite;
}


.tickertape .marquee span:nth-child(2) {
animation: marquee-two 20s ease infinite;
-moz-animation: marquee-two 20s ease infinite;
-webkit-animation: marquee-two 20s ease infinite;
}


.tickertape .marquee span:nth-child(3) {
animation: marquee-three 20s ease infinite;
-moz-animation: marquee-three 20s ease infinite;
-webkit-animation: marquee-three 20s ease infinite;
}
@keyframes marquee-one {
0% {
transform: translateX(105%);
}
10% {
transform: translateX(0);
}
40% {
transform: translateX(0);
}
50% {
transform: translateX(-105%);
}
100% {
transform: translateX(-105%);
}
}
@-moz-keyframes marquee-one {
0% {
-moz-transform: translateX(105%);
}
10% {
-moz-transform: translateX(0);
}
40% {
-moz-transform: translateX(0);
}
50% {
-moz-transform: translateX(-105%);
}
100% {
-moz-transform: translateX(-105%);
}
}
@-webkit-keyframes marquee-one {
0% {
-webkit-transform: translateX(105%);
}
10% {
-webkit-transform: translateX(0);
}
40% {
-webkit-transform: translateX(0);
}
50% {
-webkit-transform: translateX(-105%);
}
100% {
-webkit-transform: translateX(-105%);
}
}
@keyframes marquee-two {
0% {
transform: translateX(105%);
}
50% {
transform: translateX(105%);
}
60% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(-105%);
}
}
@-moz-keyframes marquee-two {
0% {
-moz-transform: translateX(105%);
}
50% {
-moz-transform: translateX(105%);
}
60% {
-moz-transform: translateX(0);
}
90% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-105%);
}
}
@-webkit-keyframes marquee-two {
0% {
-webkit-transform: translateX(105%);
}
50% {
-webkit-transform: translateX(105%);


}
60% {
-webkit-transform: translateX(0);
}
90% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-105%);
}


@keyframes marquee-three {
0% {
transform: translateX(105%);
}
50% {
transform: translateX(105%);
}
60% {
transform: translateX(0);
}
90% {
transform: translateX(0);
}
100% {
transform: translateX(-105%);
}


@-moz-keyframes marquee-three {
0% {
-moz-transform: translateX(105%);
}
50% {
-moz-transform: translateX(105%);
}
60% {
-moz-transform: translateX(0);
}
90% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-105%);
}
@-webkit-keyframes marquee-three {
0% {
-webkit-transform: translateX(105%);
}
50% {
-webkit-transform: translateX(105%);


}
60% {
-webkit-transform: translateX(0);
}
90% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-105%);
}
.widget-timeline .widget-body {
padding: 15px;
position: relative;
}
[/CSS]

cosa ho sbagliato? grazie per l'aiuto

[carlomarangoni]

Forse è meglio che ci posti un link.

[cardi_simo]

l'url per far vedere il marquee?

[MAeSI]

Ciao,

hai dimenticato la parentesi graffa di chiusura di @-webkit-keyframes marquee-two, @keyframes marquee-three, @-moz-keyframes marquee-three e @-webkit-keyframes marquee-three.

[cardi_simo]

ho provato ma ora una scritta è sotto e l'altra sopra alla prima scritta

[carlomarangoni]

ho provato ma ora una scritta è sotto e l'altra sopra alla prima scritta

Se non ci fai vedere la pagina funzionante credo si vada avanti una vita a tentativi cercando di indovinare, controllare il codice che hai postato senza testarlo diventa complicato

[MAeSI]

ho provato ma ora una scritta è sotto e l'altra sopra alla prima scritta

Sì, devi rivedere le percentuali che hai scritto. Questo potrebbe essere uno schema utilizzabile (provato e funziona), poi sistema i valori come vuoi tu:

@keyframes marquee-one {
0% {
transform: translateX(105%);
}
7% {
transform: translateX(0);
}
25% {
transform: translateX(0);
}
33% {
transform: translateX(-105%);
}
100% {
transform: translateX(-105%);
}
}

@keyframes marquee-two {
0% {
transform: translateX(105%);
}
33% {
transform: translateX(105%);
}
40% {
transform: translateX(0);
}
58% {
transform: translateX(0);
}
66% {
transform: translateX(-105%);
}
100% {
transform: translateX(-105%);
}
}

@keyframes marquee-three {
0% {
transform: translateX(105%);
}
66% {
transform: translateX(105%);
}
73% {
transform: translateX(0);
}
91% {
transform: translateX(0);
}
99% {
transform: translateX(-105%);
}
100% {
transform: translateX(-105%);
}
}

[cardi_simo]

eccolo qui il link www.itworldlive.it/marquee/marquee.html ho provato in tutti i modi ma sempre la solita cosa, non capisco

[MAeSI]

Ciao, prima di tutto quella non è una pagina web completa

Non hai provato a cambiare le % consigliate.

Prova a vedere se questo è quello che cerchi: http://jsfiddle.net/MAeSI/sFaS5/

Con IE ci sono dei problemini ad ogni fine animazione.

[cardi_simo]

grandeee, se voglio aggiungere altre cose come dovrei fare?
grazie mille non sapevo come fare