ho un problema con questo marquee ma non riesco a capire perchè non mi legge la terza, in pratica quando scorre il primo si vede, anche il secondo ma la terza no, vorrei capire il perchè. grazie ragazzi
vi metto il codice html e il css
html
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
Codice:
.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;
}