CSS3-Laufschrift zeigt nicht alle HTML-Elemente im .Marnee-Container

Question

Mein CSS3-Laufschrift-Effekt funktioniert wie gewünscht, jedoch durchläuft er nicht alle Elemente, die in meiner <section id="updates_display" class="marquee"></section> enthalten sind.

Ich verwende ASP.NET WebForms, und ich verwende Repeater, die an eine Datenquelle gebunden sind, um meine <a></a> Elemente auf zu rendern. Der Laufrahmen würde meine normalen Updates anzeigen, bevor ich dringende und Team-Updates hinzugefügt hatte. Jetzt, da dringende und Teamaktualisierungen zur Laufzeit erstellt werden, durchläuft es nur zwei Zyklen und erreicht nie die dritte, bevor es beim ersten Element neu beginnt. Ich nehme an, wenn ich mehr hinzufüge, würde dies weiterhin der Fall sein.

Wie kann ich die Laufschrift zwingen, durch alle <a></a> Elemente zu gehen, die im section.marquee enthalten sind?

CSS:

section#updates_display { 
    float: left; 
    width: 60%; 
    height: 25px; 
    padding-top: 13px; 
} 

section.marquee { 
    overflow: hidden; 
    position: relative; 
} 

section.marquee a { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    line-height: 20px; 
    text-align: center; 
    transform:translateX(100%); 
    font-size: 2em; 
} 

@keyframes left-one { 
    0% { 
     transform: translateX(100%); 
    } 

    10% { 
     transform: translateX(0); 
    } 

    40% { 
     transform: translateX(0); 
    } 

    50% { 
     transform: translateX(-100%); 
    } 

    100% { 
     transform: translateX(-100%); 
    } 
} 

@keyframes left-two { 
    0% { 
     transform: translateX(100%); 
    } 
    50% { 
     transform: translateX(100%); 
    } 
    60% { 
     transform: translateX(0); 
    } 
    90% { 
     transform: translateX(0); 
    } 
    100% { 
     transform: translateX(-100%); 
    } 
} 

section.marquee a:nth-child(1) { 
    animation: left-one 20s ease infinite; 
} 
section.marquee a:nth-child(2) { 
    animation: left-two 20s ease infinite; 
} 

a.urgent_update { 
    color: #FF3D00; 
} 
a.normal_update { 
    color: #00E676; 
} 
a.team_update { 
    color: #FFFF00; 
} 

HTML:

<section id="updates_display" class="marquee"> 
    <asp:Repeater ID="UrgentUpdatesRepeater" runat="server" DataSourceID="UrgentUpdatesDataSource"> 
     <ItemTemplate> 
      <a class="urgent_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
     </ItemTemplate> 
    </asp:Repeater> 
    <asp:Repeater ID="TeamUpdatesRepeater" runat="server" DataSourceID="TeamUpdatesDataSource"> 
     <ItemTemplate> 
      <a class="team_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
     </ItemTemplate> 
    </asp:Repeater> 
    <asp:Repeater ID="NormalUpdatesRepeater" runat="server" DataSourceID="NormalUpdatesDataSource"> 
     <ItemTemplate> 
      <a class="normal_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
     </ItemTemplate> 
    </asp:Repeater> 

Hier sind der Inhalt des Inspektors in Chrome, was zeigt, dass es 3 Links in ihr enthalten, aber es nur Zyklen durch die ersten 2 ?

<section id="updates_display" class="marquee"> 
    <a href="Updates/Post.aspx?p=3" class="urgent_update" target="_blank">Urgent Test</a> 
    <a href="Updates/Post.aspx?p=4" class="team_update" target="_blank">Team Test</a> 
    <a href="Updates/Post.aspx?p=2" class="normal_update" target="_blank">Test</a> 
</section> 

Edit: Ich habe mit ihm einige mehr gespielt und entdeckte mein Problem liegt mit meinem nth-child() in meinem Marquee CSS. Ich versuchte, nth-child(even/odd) zu verwenden, aber das verursachte alle meine sogar Elemente zur gleichen Zeit und Chancen zur gleichen Zeit anzuzeigen, immer noch funktionierend, wenn ich die Lösung finde.

Answer 1

Mein Problem war in meinem Mangel an Verständnis, wie @keyframes verwendet wurde, und wofür ich es verwendete. Ich habe meinen ursprünglichen Code von einem Beispiel abgeleitet, das eine festgelegte Anzahl von Elementen zum Scrollen hatte. Meine Lösung war, mehr über @keyframes zu lernen und meine eigene Animation zu schreiben. Ich entschied mich dafür, meine Links in ein div einzubinden und die Animation auf das div anzuwenden. Dies erstellt eine schöne langsam scrollende horizontale Liste von Links. Ich könnte am Ende javascript verwenden, um zu zählen, wie viele Links in diesem div gerendert werden und dann mein Animationstiming basierend auf der Zählung so ändern, dass es immer langsam durch sie blättert.

CSS:

section.marquee { 
    display: block; 
    overflow: hidden; 
    position: relative; 
} 

section.marquee_container { 
    display: inline; 
    width: 200%; 
    position: absolute; 
    overflow: hidden; 
    animation: marquee 20s linear infinite; 
} 

    section.marquee a { 
     display: inline; 
     width: 50%; 
     height: 100%; 
     margin: 0; 
     line-height: 20px; 
     text-align: center; 
     font-size: 2em; 
    } 



@keyframes marquee { 
    0% { 
     left: 100%; 
    } 
    5% { 
     left: 90%; 
    } 
    10% { 
     left: 80%; 
    } 
    15% { 
     left: 70%; 
    } 
    20% { 
     left: 60%; 
    } 
    25% { 
     left: 50%; 
    } 
    30% { 
     left: 40%; 
    } 
    35% { 
     left: 30%; 
    } 
    40% { 
     left: 20%; 
    } 
    45% { 
     left: 10%; 
    } 
    50% { 
     left: 0%; 
    } 
    55% { 
     left: -10%; 
    } 
    60% { 
     left: -20%; 
    } 
    65% { 
     left: -30%; 
    } 
    70% { 
     left: -40% 
    } 
    75% { 
     left: -50%; 
    } 
    80% { 
     left: -60%; 
    } 
    85% { 
     left: -70%; 
    } 
    90% { 
     left: -80%; 
    } 
    95% { 
     left: -90%; 
    } 
    100% { 
     left: -100%; 
    } 

} 

a.urgent_update { 
    color: #FF3D00; 
} 
a.normal_update { 
    color: #00E676; 
} 
a.team_update { 
    color: #FFFF00; 
} 

HTML:

<section id="updates_display" class="marquee"> 
     <section class="marquee_container"> 
      <asp:Repeater ID="UrgentUpdatesRepeater" runat="server" DataSourceID="UrgentUpdatesDataSource"> 
       <ItemTemplate> 
        <a class="urgent_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
       </ItemTemplate> 
      </asp:Repeater> 
      <asp:Repeater ID="TeamUpdatesRepeater" runat="server" DataSourceID="TeamUpdatesDataSource"> 
       <ItemTemplate> 
        <a class="team_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
       </ItemTemplate> 
      </asp:Repeater> 
      <asp:Repeater ID="NormalUpdatesRepeater" runat="server" DataSourceID="NormalUpdatesDataSource"> 
       <ItemTemplate> 
        <a class="normal_update" href='<%# Eval("link") %>' runat="server" target="_blank"><%# Eval("Title") %></a> 
       </ItemTemplate> 
      </asp:Repeater> 
     </section> 
    </section>